CSS animations allows us to animate transitions from one CSS style to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints along the way.
How to Implement Animation?
To create a CSS animation sequence, we style the element we want to animate with the animation property or its sub-properties. This lets us to configure the timing and duration of the animation, as well as other details of how the animation sequence should progress.
The sub-properties of the animation property includes:
Configures the delay between the
time the element is loaded and the
beginning of the animation sequence.
animation-direction Configures whether or not the animation should
alternate direction on each run
through the sequence or reset to the
start point and repeat itself.
animation-duration Configures the length of time that an animation
should take to complete one cycle.
animation-iteration-count Configures the number of times the
animation should repeat; you can
specify infinite to repeat the
animation-name Specifies the name of the @keyframes at-rule
describing the animation's
animation-play-state Lets you pause and resume the animation
animation-timing-function Configures the timing of the
animation; that is, how the
animation transitions through
keyframes, by establishing
animation-fill-mode Configures what values are applied by the
animation before and after it is