CSS Animations
- The difference with an animation is that you can define the different values for various CSS properties at different percentages of the timeline in the animation. We then give a name to the animation which can be used within other styles.
- When you add the animation name to a style definition, you also state how long you want it to take and how many times you want it to repeat.
/* use an animation */
.box {
animation-direction: normal;
animation-duration: 3s;
animation-iteration-count: infinite; /* keep looping */
animation-name: thing;
}
/* define an animation */
@keyframes thing {
0% {
scale: 0;
background-color: cornflowerblue;
}
50% {
scale: 1;
background-color: cornsilk;
}
100% {
scale: 2;
background-color: coral;
}
}