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:

1. animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence.
2. 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.
3. animation-duration Configures the length of time that an animation should take to complete one cycle.
4. animation-iteration-count Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
5. animation-name Specifies the name of the @keyframes at-rule describing the animation's keyframes.
6. animation-play-state Lets you pause and resume the animation sequence.
7. animation-timing-function Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
8. animation-fill-mode Configures what values are applied by the animation before and after it is executing.