HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
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.
There are three key advantages to CSS animations over traditional script-driven animation techniques:
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. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in the Defining animation sequence using keyframes section below.
The sub-properties of the animation property are:
Specifies the composite operation to use when multiple animations affect the same property simultaneously. This property is not part of the animation shorthand property.
Specifies the delay between an element loading and the start of an animation sequence and whether the animation should start immediately from its beginning or partway through the animation.
Specifies whether an animation's first iteration should be forward or backward and whether subsequent iterations should alternate direction on each run through the sequence or reset to the start point and repeat.
Specifies the length of time in which an animation completes one cycle.
Specifies how an animation applies styles to its target before and after it runs.
Note: In the case of animation forwards fill mode, animated properties behave as if included in a set will-change property value. If a new stacking context was created during the animation, the target element retains the stacking context after the animation has finished.
Specifies the number of times an animation should repeat.
Specifies the name of the @keyframes at-rule describing an animation's keyframes.
Specifies whether to pause or play an animation sequence.
Specifies the timeline that is used to control the progress of a CSS animation.
Specifies how an animation transitions through keyframes by establishing acceleration curves.
After you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing one 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.
Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to. Both are optional. If from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.
You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.
The animation shorthand is useful for saving space. As an example, some of the rules we've been using through this article:
...could be replaced by using the animation shorthand.
To learn more about the sequence in which different animation property values can be specified using the animation shorthand, see the animation reference page.
The CSS animation longhand properties can accept multiple values, separated by commas. This feature can be used when you want to apply multiple animations in a single rule and set different durations, iteration counts, etc., for each of the animations. Let's look at some quick examples to explain the different permutations.
In this first example, there are three duration and three iteration count values. So each animation is assigned a value of duration and iteration count with the same position as the animation name. The fadeInOut animation is assigned a duration of 2.5s and an iteration count of 2, and the bounce animation is assigned a duration of 1s and an iteration count of 5.
In this second example, three animation names are set, but there's only one duration and iteration count. In this case, all three animations are given the same duration and iteration count.
In this third example, three animations are specified, but only two durations and iteration counts. In such
cases where there are not enough values in the list to assign a separate one to each animation, the value assignment cycles from the first to the last item in the available list and then cycles back to the first item. So, fadeInOut gets a duration of 2.5s, and moveLeft300px gets a duration of 5s, which is the last value in the list of duration values. The duration value assignment now resets to the first value; bounce, therefore, gets a duration of 2.5s. The iteration count values (and any other property values you specify) will be assigned in the same way.
If the mismatch in the number of animations and animation property values is inverted, say there are five animation-duration values for three animation-name values, then the extra or unused animation property values, in this case, two animation-duration values, don't apply to any animation and are ignored.
This basic example styles a <p> element using the translate and scale transition properties so that the text slides in from off the right edge of the browser window.
In this example, the style for the <p> element specifies that the animation should take 3 seconds to execute from start to finish, using the animation-duration property and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is s