CSS animations make it possible to animate transitions from one CSS style configuration 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.
To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress.
Each animation name has a @keyframes that confiigures the appearance of the animation.
Sets the time that an animation will have to complete one cycle.
Defines the speed over time of an object being animated and how it will progress through its cycle. Some possible values include: ease, linear, ease-in, ease-out, cubic-bezier(), step-start, step-end, and ease-in-out.
Determines when the animation will start. This can either be immediately, before, or after.
Sets amount of times an animation cycles through before it stops.
Specifies which direction the animation will play. Some possible values include: reverse, alternate, alternate-reverse, and normal.
Sets how a CSS animation applies styles to its target before and after its execution. Some possible values include: none, forwards, backwards, and both.
Allows you to specify whether an animation is running or paused.Some possible values include: paused and running
Don't be sleepy! Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
@keyframes configures the appearance of the animation.
Each stage of the animation is represented as a percentage. 0% represents the beginning state of the animation. 100% represents the ending state of the animation. Multiple intermediate states can be added in between.