CSS animations allow you to gradually change an element from one style to another. Animations consist of two parts: 1) a style describing the CSS animation and 2) a set of keyframes that mark the start and end states of the animation’s style. With some creativity, many animations can be done entirely in CSS... without any JavaScript!
Some advantages of using CSS animations rather than JavaScript include:
@keyframes
The @keyframes
rule is like a timeline in CSS. It allows you to specify the style at a specific moment in time.
from
and to
values.animation
propertyanimation: name duration timing-function delay iteration-count direction fill-mode
name
@keyframes name
duration
Total length of time that the animation takes to complete one cycle.
timing-function
How an animation progresses through the duration of each cycle.
delay
Delay between the time the element is loaded and the beginning of the animation.
iteration-count
Number of times the animation will repeat, or infinite for looping animations.
direction
Whether or not the animation should alternate directions through the sequence or reset to the starting point.
fill-mode
How an animation applies styles to its target before and after its execution.