How to Create and Customize Animations in CSS
Besides the transitions, there is also a similar concept called animation. Their main difference is that the transition requires you to define a trigger using pseudo-selectors, while the animation will play automatically once it is loaded.
To create an animation, you must define its keyframes using the @keyframes
rule.
@keyframes change-bg-color {
from {
background-color: white;
}
to {
background-color: darkviolet;
}
}
In this example, the animation is named change-bg-color
, and it changes the background-color
property from white
to darkviolet
. To apply this animation, you must specify the animation-name
and animation-duration
properties.
div {
/* . . . */
animation-name: change-bg-color;
animation-duration: 4s;
}
Instead of using the keywords from
and to
, it is also possible to use percentage values, which allows you to define more than two keyframes.
@keyframes change-bg-color {
0% {
background-color: white;
}
25% {
background-color: bisque;
}
50% {
background-color: crimson;
}
100% {
background-color: darkviolet;
}
}
Like transitions, animation allows you to define properties such as animation-timing-function
and animation-delay
. These work exactly the same as their transition counterparts.
div {
/* . . . */
animation-name: change-bg-color;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
}
Animation iteration count
You can also define how many times you wish the animation to repeat using the animation-iteration-count
property.
div {
/* . . . */
animation-name: change-bg-color;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: 3;
}
Animation direction
The animation-direction
property defines in which direction the animation will be played, and it accepts four different options:
normal
: The animation is played forward.reverse
: The animation is played backward.alternate
: The animation is played forward first, then backward. Only works whenanimation-iteration-count
is more than 1.alternate-reverse
: The animation is played backward first, then forward.
div {
/* . . . */
animation-name: change-bg-color;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: 4;
animation-direction: alternate;
}
Animation fill mode
Lastly, the animation-fill-mode
property determines how the element will be displayed before and after the animation is played. By default, the element will not retain any styles from the animation.
@keyframes change-bg-color {
0% {
background-color: white;
}
25% {
background-color: bisque;
}
50% {
background-color: crimson;
}
100% {
background-color: darkviolet;
}
}
div {
/* . . . */
background-color: aqua;
animation-name: change-bg-color;
animation-duration: 4s;
animation-fill-mode: none;
}
When set to forwards
, the element will retain the styles from the last keyframe of the animation after the animation is played.
When set to backwards
, the element will adopt the styles from the first keyframe of the animation as soon as the animation is played.
When set to both
, the element will retain the styles from the first keyframe before the animation starts (behaves like backwards
) and the styles from the last keyframe after the animation is over (behaves like forwards
).
The animation shorthand
Lastly, just like with the transitions, CSS offers a shorthand property called animation
, which has the following syntax:
animation: <animation_name> <animation_duration> <animation_timing_function> <animation_delay> <animation_iteration_count> <animation_direction>;
div {
/* . . . */
animation: change-bg-color 4s ease-in-out 2s 4 alternate;
}