CSS Animations are defined by the World Wide Web Consortium (W3C) in the CSS Animations specification.

Animations are similar to transitions in that they animate elements as they change position, size, color, and opacity; and as they rotate, scale, translate, and so on. And just as you can with transitions, you can specify timing functions to control the rate of progression of an animation.

However, with Cascading Style Sheets, Level 3 (CSS3) Animations, you can also use keyframes, which specify the values for the animating properties at various points during the animation. This way, you can define the behavior of an animation not only at the beginning and end of the animation, but in between as well. Animations can also have iterations and reverse-direction capability, and can be given the ability to pause and resume.

As you might expect, CSS3 Animations provides you with infinite possibilities for creating rich, compelling experiences. This topic provides a brief overview of how to create a CSS animation in Internet Explorer 10 and Windows Store apps using JavaScript, and shows an example of CSS3 Animations in use.

The properties, at-rule, and events described in this topic previously required a Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows Store apps using JavaScript. This prefix is no longer required, but will still be recognized. To ensure compatibility in the future, applications using the Microsoft vendor prefix with animation properties should be updated accordingly.

Creating an animation

Specify animation properties

First, specify the animation properties in a selector that applies to the element you want to animate. The animation properties are described in this section.

The animation-name property

The animation-name property specifies animation identifiers (effectively, the "name" you've given to the specific animation). An animation identifier selects a CSS @keyframes at-rule. Its syntax is shown here:

The animation-duration property

Indicates one or more comma-separated time values, each of which indicates the length of time that a complete animation cycle takes. Each value is in the form of a floating-point number, followed by a time unit designator (ms or s). This property accepts negative values.

The animation-timing-function property

The animation-timing-function property enables an animation to change speed over its duration by describing how the intermediate property values used during a single cycle of the animation will be calculated. You do this by specifying an animation timing function that is based on a cubic Bézier curve, which takes four parameters. You can specify a timing function for the entire animation, or to individual keyframes.

You can either specify the curve explicitly by using the cubic-bezier function and entering the four values manually, or you can choose from several function keywords, each of which corresponds to a commonly used timing function. The property's syntax is shown here:

Specifies one or more comma-separated timing functions that define the intermediate property values used during a single cycle of the animation. The animation is calculated on a set of corresponding object properties identified in the CSS @keyframes at-rule specified by the animation-name property. The possible values can be any of the following. See the animation-timing-function reference page for descriptions of each function.

cubic-bezier(x₁,y₁,x₂,y₂)

The four parameters of this function must be floating point values between 0 and 1, inclusive. The values correspond to the x- and y-coordinates of the P₁ and P₂ points of the cubic Bézier curve. For properties other than opacity and color, the cubic-bezier curve function accepts y-coordinates outside the standard range of between 0 and 1. This enables you to create "elastic" or "bounce" transition effects.

ease

This is the initial value. This timing function gradually increases in speed at the start, animates at full speed, and then gradually decreases in speed at the end.

linear

This timing function has a consistent speed from start to end.

ease-in

This timing function gradually increases in speed at the start.

ease-out

This timing function gradually decreases in speed at the end.

ease-in-out

This timing function gradually increases in speed at the start and then gradually decreases in speed at the end.

steps

This timing function defines a stepped timing function, and takes two parameters. The first parameter specifies the number of intervals; the optional second parameter specifies the point in the interval where the property value changes. The second parameter is constrained to the values start or end, which is the default.

The animation-iteration-count property

The animation-iteration-count property defines the number of times an animation cycle is played. The property's syntax is shown here:

The animation-direction property

Defines whether the animation should play in reverse on alternate cycles. This property can be set to one or more of the following comma-separated values:

normal

This is the initial value. It indicates that the animation will not play in reverse on alternate cycles.

reverse

This value indicates that the animation cycles are played in the reverse direction of the direction in which they were specified.

alternate

This value indicates that the animation cycles alternate between playing in the forward direction (odd iterations) and the reverse direction (even iterations).

alternate-reverse

This value indicates that the animation cycles alternate between playing in the reverse direction (odd iterations) and the forward direction (even iterations).

The animation-play-state property

The animation-play-state property specifies whether an animation is playing or paused. This property can be useful when creating a mechanism to enable the user to pause an animation. The property's syntax is shown here:

Specifies one or more comma-separated offset values within an animation (the amount of time from the start of an animation) before the animation is displayed for a set of corresponding object properties. Each value is in the form of a floating-point number, followed by a time unit designator (ms or s).

A "0" value is the initial value, and indicates the animation will execute as soon as it is applied.

A negative value indicates the animation will execute as soon as it is applied, but will appear to have begun execution at the specified offset, or during its play cycle.

The animation-fill-mode property

The animation-fill-mode property defines whether the effects of an animation are visible before or after it plays. By default, an animation does not affect property values in the time between its application and its execution (during any delay defined by the animation-delay property). Also, by default, an animation does not affect property values after the animation ends (after the time defined by the animation-duration property has elapsed). The animation-fill-mode property is used to override these default behaviors. Its syntax is shown here:

Create the keyframes

Next, specify keyframes for your animation. Keyframes enable you to finely control the intermediate values in an animation. The @keyframes rule specifies a list of property animation keyframes for an object, and specifies an identifier for the animation. Its syntax is shown here:

A list of property animation keyframes for an object in the HTML document. This rule is used to specify property values at various points during an animation, as well as an identifier for the animation. It specifies the property values during one cycle of an animation. (The animation may iterate one or more times.)

This rule uses keyframe selectors to specify property values at various stages of the animation. Keyframe selectors can be declared as from (equivalent to 0%), to (equivalent to 100%), and one or more percentages.

The following example demonstrates three keyframe selectors, each with two keyframe descriptors.

In this example, keyframes are specified for three points during the animation: the beginning (the from value, or 0%), 40%, and the end (the to value or 100%).

You can also specify the timing function that is to be used as the animation moves to the next keyframe. Simply include the animation-timing-function property in the appropriate keyframe selector.

Apply the animation

Finally, apply the animation style to an element. Typically, this is triggered by an event, such as a button click (or tap). Be aware that a CSS animation cannot be interrupted by changing the animating property values, as transitions can. A CSS animation can only be interrupted by using the animation-play-state property or by adding or removing the animation name.

When the animation completes, the animated properties return to their original values.

Now, let's define some parameters for the animation. We'll add a selector to the style section that uses the :active pseudo-class. This means that the animation will only occur for as long as the user clicks and holds (or touches and holds) the text block. The animation continues until it is finished.

To ensure that the animation begins right away, lasts for 5 seconds, repeats one time (for a total iteration count of 2), and is identified with the name "demo," we add the following selector:

Now let's create three keyframes—one for the beginning of the animation, one for the middle, and one for the end. Within each keyframe, we’ll define both properties that will be changing and timing functions to define the rate of change.

We've defined two properties to animate, background-color and transform. Over the course of a single cycle of the animation, the background color of the div element animates from lime (the original color) to purple, and then to blue. The div element also moves to the right and down by 20 pixels and 30 pixels, respectively, and then back. The animation uses the ease timing function to animate from the beginning to the halfway point (the keyframe at 50%), and then the ease-in timing function to animate from the halfway point to the end. The animation repeats one time.

Animations DOM Events

animationstart

The animationstart event occurs at the beginning of the animation, accounting for any animation delay (as specified by the animation-delay property), if necessary. A negative delay causes the event to fire with an elapsed time equal to the absolute value of the delay.