CSS Animations Study Guide
Translated by
ScribdTranslationsCSS Animations Study Guide
Translated by
ScribdTranslationsStudy Guide - CSS Animations
Hello! We welcome you to this new study guide.
What is this guide about?
The following study guide aims to practice and exercise the contents that
we have seen in class, in addition to delving into additional topics that complement
those seen in class.
Let's go for it!
_ 1
[Link]fi[Link]
Table of contents
Introduction 3
Transitions 3
Properties of a transition 4
Transition-Property 5
Timing-duration 6
Timing function: The time function 6
Types of time function 7
Activity 1 9
Delay 9
Summary of the properties 9
Transformations (Transform) 10
Activity 2 12
Transformations with transitions 12
Activity 3 13
Animations 13
Keyframes 16
Duration and delay 16
Address 17
Animations with multiple frames 18
Activity 4 19
Closing questions 20
Answers 21
Let's get started!
_ 2
[Link]fi[Link]
Introduction
With CSS, we can bring life and dynamism to our HTML elements using different
techniques, including transitions, transformations, and animations.
These properties allow adding visual and motion effects to our
web designs, which is especially useful for improving the experience of
user and make our sites more attractive and functional.
Next, we will examine in detail each of the following techniques.
● Transitions.
● Transformations (Transform).
● Animations
Transitions
La propiedad transition permite crear animaciones de transición suave entre dos estados de
an element; for example, by changing the background color of a button when hovering over it
It is possible to create a smooth transition that makes the color change more appealing.
for the user.
Let’s see this same example in code:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de animación CSS</title>
<metacharset="utf-8">
<style>
button{
background-color:#0077FF
color: white;
padding:10px 20px;
font-size:16px;
border: none;
border-radius:5px;
transition: background-color0.3sease-out;
}
button:hover{
background-color:rgb(255, 140, 0);
_ 3
[Link]fi[Link]
}
</style>
</head>
<body>
Hover the mouse cursor over the button
</body>
</html>
In the HTML file, we create a simple button that has text inside it, while in the
CSS file, we apply styles to the button.
This includes the background color, the text color, the padding, the font size,
the border and the border radius. A transition property is also added, which
indicate to the browser how to animate the change in the background color of
button.
The secret of animation lies in the transition property, which takes four values:
1. The property that will be animated (background-color in this case).
[Link] duration of the transition (0.3 seconds in this case).
[Link] timing function used for the transition (ease-out in this case).
[Link]. In this case, we do not specify it, but additional time can be added.
to delay the start of the transition.
We will now delve into these properties.
Properties of a transition
In the previous example, when we used the following values for the transition:
background-color 0.3s ease-out we actually use multiple properties for
separated. These are:
● transition-property: background-color;
● transition-duration: 0.3s
● transition-timing-function: ease-out
● transition-delay: 0s
However, it is much shorter to write:transition: background-color 0.3s
ease-out 1s;
_ 4
[Link]fi[Link]
Transition-Property
The transition can be applied to all properties simultaneously or only to some.
Let's see an example with a box, that changes all when you hover the mouse over it.
properties simultaneously.
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Ejemplo de transición con múltiples propiedades</title>
<style>
.box{
width:100px;
height:100px;
background-color: blue;
transition: all3s;
}
.box:hover{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<divclass="box"></div>
</body>
</html>
Now let's modify the transition property so that it only applies to the width of the
box using:transition: width 3s;with this we will see that the properties color and
height changes immediately, but the width property takes 3 seconds to change.
If we want a transition over all the properties simultaneously
we will occupy the valueall
_ 5
[Link]fi[Link]
Timing-duration
The duration is quite simple to explain, it consists of the number of seconds or
milliseconds that the transition will last. We can usetransition-duration: 1s o
transition-duration: 1000ms or include the duration directly in the transition
as we have done so far:transition: all 1s;
Timing-function: The time function
The time function is a property that allows you to control the speed curve of the
transition. There are different types of curves for the transition of animations, where two
Common examples are the linear curve and the ease curve.
Image 1. Curves of the time function
Source: Desafío Latam
The linear curve advances the same amount at each step, while the ease curve produces
a more natural and smooth transition, starting slowly, accelerating and decelerating
towards the end. The choice of the appropriate time function depends on the effect that is desired.
achieve in animation.
_ 6
[Link]
Types of time functions
Time function Description
ease Starts slowly, then accelerates and then decelerates towards
the end.
ease-in Start slowly and then accelerate towards the end.
ease-out Starts quickly and then slows down towards the end.
ease-in-out Starts slowly, then accelerates and then decelerates towards
the end.
linear It moves at a constant speed throughout the
transition.
step-start The transition begins immediately.
step-end The transition ends immediately.
steps(n) Divide the transition into n steps, where n is a number.
whole. Each step has the same duration and is completed
at the same time.
steps(n, start) Divide the transition into n steps, where n is a number
whole. The start value indicates whether each step begins or
it ends at the time of the transition.
Table 1. Time Functions
Source: Desafío Latam
_ 7
[Link]fi[Link]
Let's try a similar example to the previous one by changing the time function to steps and giving it
we will pass the value 5.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de animación CSS</title>
<metacharset="utf-8">
<style>
button{
background-color:#0077FF
color: white;
padding:10px 20px;
font-size:16px;
border: none;
border-radius:5px;
transition: background-color1ssteps(5);
}
button:hover{
background-color:rgb(255, 140, 0);
}
</style>
</head>
<body>
Hover the mouse cursor over the button
</body>
</html>
If we now try moving the mouse cursor, we will see that the color change is
paused by intervals, where in a total of 5 intervals it changes color.
_ 8
[Link]fi[Link]
Activity 1
● Try changing the value of step to a different value, what effect does it have?
● Try changing the timer function for the following functions.
○ ease
○ ease-in
○ ease-out
○ linear
It can be difficult to detect changes, try increasing the duration of the transition to
make it simpler.
Delay
With the transition-delay property, we can control how long the transition takes to delay.
start. Like the duration, it can be in seconds or milliseconds.
Summary of the properties
Image 2. Summary of transitions
Source: Desafío Latam
_ 9
[Link]fi[Link]
Transformations
CSS transformations are used to modify the geometric properties of a
element, such as its size, position, and rotation, using the transform property.
This summary table shows the transformations we can apply.
Transformation Description
translate() Move an element in the specified direction and distance.
translateX() Move an element horizontally over the distance
specified.
translateY() Move an element vertically by the distance.
specified.
scale() Scale an element by the specified amount.
scaleX() Scale an element horizontally by the amount
specified.
scaleY() Vertically scale an element by the amount
specified.
rotate() Rotate an element at the specified angle.
skew() Remove an element at the specified angles.
skewX() A horizontal element is skewed at the angle
specified.
skewY() It tilts vertically an element at the specified angle.
matrix() Combine several transformations into a single matrix.
Table 2. Transformations
Source: Desafío Latam
_ 10
[Link]fi[Link]
Let's see an example with rotation and scale:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de transformación en CSS</title>
<style>
.box{
width:100px;
height:100px;
background-color: blue;
transformrotate(45deg)scale(1.5);
The transformation breaks and scales the box
}
</style>
</head>
<body>
<div class="box"></div>
The box transforms according to the properties of the style
</body>
</html>
When we open the page, we will see a box rotated 45 degrees, we will also see that it is
50% larger due to scale(1.5).
Seeing this at first glance may be complex, but let's review an exercise where
let's add 2 boxes, one normal and another with transformation.
Image 3. Exercise
Source: Desafío Latam.
_ 11
[Link]fi[Link]
Activity 2
● Move a box to the right and down: Create a rectangular box and move it.
50 pixels to the right and 50 pixels down using the transform property
with the function translate().
● Scale an image to twice its original size: Create a div element with a
background image and scale the image to double its original size using the
transform property with the scale() function.
● Rotate a text 180 degrees: Create a p element with text and rotate the text 180
degrees using the transform property with the rotate() function.
Transformations with transitions
We can combine transformations and transitions to achieve interesting effects, let's see
an example:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de transición con transformación en CSS</title>
<style>
.box{
width:100px;
height:100px;
background-color: blue;
transform:rotate(0deg);
transition: transform1s;
The transition will apply to the transformation
}
.box:hover{
transformrotate(45deg);
When hovering over it, the box rotates.
}
</style>
</head>
_ 12
[Link]fi[Link]
<body>
<divclass="box"></div>
The box will rotate smoothly when the mouse hovers over it.
</body>
</html>
Hovering the mouse over the box will make it rotate.
Activity 3
1. Scale an image to double its original size when hovering over it:
❖ Create a div element with a background image and scale the image to double
its original size when the user hovers the mouse over the element.
To achieve this, the transform property must be used with the scale() function.
and the transition property to make the transition smooth and gradual.
Rotate a box 360 degrees when the mouse moves over it:
❖ Create a rectangular box and make it rotate 360 degrees when the user does
click on it. To achieve this, the transform property must be used with the
function rotate() and the transition property to make the rotation smooth
and gradual.
3. Make a text move to the right when hovering the mouse over it:
❖ Create a p element with text and make it move to the right
when the user hovers the mouse over the element. To achieve this, it is
you must use the transform property with the translate() function and the property
transition to make the scrolling smooth and gradual.
Animations
The CSS animation property allows us to create advanced and customized animations.
on our websites.
One of the most useful features of this property is the ability to define
keyframes, which are key points in animation where values are set
específicos de las propiedades CSS. Gracias a los keyframes, podemos tener un control
I need to know how the animation behaves at each moment, which allows us to create
complex effects.
_ 13
[Link]fi[Link]
On this occasion, we will focus on understanding how keyframes work and how
we can use them to create dynamic and surprising animations. Let's see a
example:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de animaciones en CSS</title>
<style>
.box{
width:100px;
height:100px;
background-color: blue;
position: relative;
animation-name: example;
animation-duration:2s;
animation-iteration-count: infinite;
}
@keyframesexample {
from{left:0px; }
to{left:200px;
The animation will move the box from 0px to 200px to the left
}
</style>
</head>
<body>
<div class="box"></div>
The box is animated with the defined animation property.
</body>
</html>
_ 14
[Link]fi[Link]
In animations, there are many key concepts, and we summarize them in this table.
Concept Description
Keyframes Keyframes define the different states
of the animation.
Duraciónanimation-duration The duration of the animation refers to the time
how long it takes for the animation to complete.
Delay Animation The delay refers to the time it takes to
start the animation after it has been
activated.
Number of iterations It is the number of times that it will be repeated
animation-iteration-count animation. It can be a defined amount or
infinity.
Address The direction of the animation refers to the
the way the animation is reproduced.
Timing function The time function defines how it is applied
the style changes throughout the duration
from the animation.
Fill mode The fill mode refers to how the...
styles after it is completed
animation.
Animation events Animation events allow you to execute
specific functions in JavaScript in
different moments of animation.
Table 3. Key Concepts.
Source: Desafío Latam.
_ 15
[Link]
Keyframes
Keyframes are key points in an animation that allow us to set the values
of the CSS properties at specific moments, where when using several of these
keyframes in an animation create the illusion of smooth movement between each point.
For example, if we want to animate an object in CSS to move from point A to a
point B, we can define a keyframe for the initial position at A and another for the position
final in B. This will automatically calculate the necessary intermediate frames.
para crear una transición suave entre ambos puntos.
@keyframes example {
from{left:0px; }
to{left:200px; }
}
In the first example we saw, the keyframes were from (desde) and to (hasta) and the animation
It consisted of the movement from the first point to the second.
Duration and delay
For animations, the concepts of duration and delay are the same as for
transitions. Withanimation-duration we control how long it takes to
complete the animation and withanimation-delayHow long does it take to start.
For example, we could add:
animation-duration: 2s;
animation-delay: 1s;
El código anterior retrasa el comienzo de la animación 1 segundo y haría que cada iteración
the animation will last 2 seconds.
_ 16
[Link]
Address
The propertyanimation-direction allows us to create a reversible animation and of this
way to achieve a smoother animation easily.
Let's look at an example of an animation without this property and then add it to see the
difference.
/* CSS */
.container{
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
.text{
font-size:3em;
animation: move2sinfinite;
}
@keyframesmove {
from{
transformtranslateX(0);
}
to{
transform:translateX(200px);
}
}
<!-- HTML -->
<div class="container">
Hello, world!
</div>
In each iteration of the animation, we see that the box moves automatically,
resulting in an animation that looks strange, we can easily improve this
adding the propertyanimation-direction: alternate .
_ 17
[Link]fi[Link]
Our resulting CSS would look like this:
/* CSS */
.container{
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
.text{
font-size:3em;
animation: move2sinfinite;
animation-direction: alternate;
}
@keyframes move {
from{
transformtranslateX(0);
}
to{
transformtranslateX(200px);
}
}
Al recargar la página veremos que el movimiento de la animación continua en reversa una
once it finishes, resulting in a more natural effect.
Animations with multiple frames
So far we have only used keyframes with 2 key points, but it is
it is possible to use multiples to achieve more advanced animations:
/* CSS */
.container{
width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
_ 18
[Link]fi[Link]
.text{
position: absolute;
font-size:48px;
animation: move4sease infinite;
}
@keyframesmove {
0% {
transformtranslateX(0);
}
25%
transformtranslateX(100px);
}
50%
transformtranslateX(0);
transformrotate(180deg)
;
} 75% {
transform:translateX(-100px);
}
100%
transformtranslateX(0);
}
}
<!-- HTML -->
<div class="container">
Hello, world!
</div>
Activity 4
● In a new html file, you must create a box of 100px by 100px.
● Using keyframes at zero time, change its color to green.
● At 50, change the color to red.
● At 100, change the blue color.
● Make the animation reversible.
_ 19
[Link]fi[Link]
Closing questions
What CSS property is used to create a transformation that scales or increases?
does it decrease the size of an element?
a) transform-scale
b) transform-rotate
c) transform-translate
d) transform-skew
2. What property is used to specify how many times it should be executed?
animation?
animation-play-state
b) animation-iteration-count
c) animation-timing-function
d) animation-fill-mode
3. How is the duration of an animation specified?
a) using the animation-duration property
b) using the animation-play-state property
c) using the animation-iteration-count property
d) using the animation-timing-function property
4. Which property is used to specify the speed curve of an animation?
a) animation-play-state
b) animation-iteration-count
c) animation-timing-function
d) animation-fill-mode
5. What is the predefined function of CSS that provides a speed curve?
constant in an animation?
a) linear
b) ease
c) ease-in
d) ease-out
6. What CSS property is used to define the direction of an animation?
animation-play-state
b) animation-direction
c) animation-fill-mode
d) animation-iteration-count
_ 20
[Link]fi[Link]
Answers
Question Correct answer
1 A
2 B
3 A
4 C
5 A
6 B
_ 21
[Link]fi[Link]