CSS animations allow you to create transitions between two formatting states. An animation is described by two things: properties specific to the animation on the one hand and a set of steps (keyframes *) which indicate the initial, final and possibly intermediate states on the other.

*A keyframe in animation is a drawing or shot that defines the start and end points of any smooth transition.

How to configure the animation?

To create a CSS animation, you must use the shorthand animation property or the corresponding detailed properties on one or more elements. This property allows you to configure the duration, timing, and other details about the animation. Be careful, this does not determine the visual appearance of the animation. This is defined using CSS formatting rules within the
keyframes rule as described below.

The detailed properties attached to the shorthand animation property are for example:

animation-delay, animation-direction, animation-duration… etc

Define the steps composing an animation (keyframes):

Once we have defined the properties specific to the animation, we must define the formatting that changes during this animation. For this we define two or more steps using the
keyframes rule. Each step describes how the animated element should be displayed at any given time during the animation.

The duration of the animation is defined before and the
keyframes rule therefore uses values ​​expressed in percentages (CSS percentage type) to indicate the instant corresponding to this state. 0% indicates the initial state of the animation and 100% indicates the final state. These two states being very important, there are two aliases to describe them: from and to. These states are optional and if from / 0% or to / 100% are not defined, the browser will use the calculated values ​​of the different properties.

It is also possible to add intermediate stages, between the initial state and the final state of the animation.

---