Animations
Internet Explorer 10 and Windows apps using JavaScript support Cascading Style Sheets (CSS) Animations. CSS Animations enable you to create visually appealing rich applications with smooth, fluid, animated experiences.
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 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 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.
For a list of CSS properties that you can animate, see Animation and transition properties.
Creating an animation
You create an animation in three basic steps:
1. Specify the animation properties.
2. Create the keyframes.
3. Apply the animation to one or more elements.
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:
| Property | Description |
|---|---|
Specifies one or more animation identifiers. You identify animations using the CSS @keyframes at-rule. |
The animation-duration property
The animation-duration property specifies the length of time to complete one cycle of the animation. Its syntax is shown here:
| Property | Description |
|---|---|
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:
| Property | Description |
|---|---|
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.
|
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:
| Property | Description |
|---|---|
Specifies the number of times an animation cycle is played. Multiple values are separated by commas.
If a negative value or a value of "0" is specified, no animation is applied. You can use the animation-iteration-count property with the animation-direction property set to alternate, which causes the animation to play in reverse on alternate cycles. |
The animation-direction property
The animation-direction property specifies the direction of play for an animation cycle. The property's syntax is shown here:
| Property | Description |
|---|---|
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:
|
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:
| Property | Description |
|---|---|
Defines whether the animation is running or paused. This property can be set to one or more of the following comma-separated values:
|
The animation-delay property
The animation-delay property defines when an animation will start and enables an animation to begin some period of time from when it is applied. Its syntax is shown here:
| Property | Description |
|---|---|
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).
|
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:
| Property | Description |
|---|---|
Specifies one or more comma-separated values that define the animation's behavior outside the time it is running. It can be set to any of the following values:
|
The animation property
The animation shorthand property combines six of the animation properties into a single property. Its syntax is shown here:
| Property | Description |
|---|---|
Specifies one or more sets of space-delimited animation properties for a set of corresponding object properties. The animation property values must be set in the following order:
If you have more than one set of the six animation property values, you must separate each set using a comma. |
Consider the following code example, which defines several animation properties on a div element:
div {
animation-name: myAnimation;
animation-duration: 3s;
animation-timing-function: ease-out;
animation-delay: -1s;
animation-iteration-count: 2;
animation-direction: normal;
}
With the animation shortcut property, you could specify all six of these properties on just one line, as shown here:
div {
animation: myAnimation 3s ease-out -1s 2 normal;
}
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:
| Rule | Description |
|---|---|
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.
@keyframes myAnimation {
from {
left: 100px;
right: 50px;
}
40% {
left: 50px;
right: 10px;
}
to {
left: 10px;
right: 10px;
}
}
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.
Example
The following example shows a CSS animation. It was created using the Hands On: Animations demo on the IE Test Drive.
To start with, we'll create a div element with some text and apply some styles to it:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
padding:10px;
font:bold 20pt "Segoe UI";
}
div {
width:250px;
background-color:lime;
padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>
To see what this code looks like, view this page.
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:
...
div:active {
animation-delay: 0s;
animation-duration: 5s;
animation-iteration-count: 2;
animation-name: demo;
}
...
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.
@keyframes demo {
from {
animation-timing-function: ease;
}
50% {
background-color: purple;
animation-timing-function: ease-in;
transform: translate(20px,30px);
}
to {
background-color: blue;
}
}
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.
View this animation. (Internet Explorer 10 is required.)
Animations DOM Events
Internet Explorer 10 and Windows apps using JavaScript define three animation Document Object Model (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.
- Bubbles: Yes
- Cancellable: Yes
- Context Info: animationName (AnimationEvent)
animationend
The animationend event occurs when the animation finishes.
- Bubbles: Yes
- Cancellable: Yes
- Context Info: animationName, elapsedTime (AnimationEvent)
animationiteration
The animationiteration event occurs at the end of each iteration of an animation. This event only occurs when the animation-iteration-count property is greater than one.
- Bubbles: Yes
- Cancellable: Yes
This example animates a <div> element, and fires the animationstart, animationend, and animationiteration events to change the text in the box. Try the example online.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>CSS Animation Events Example</title>
<style>
body {
padding:10px;
font-family:"Segoe UI";
}
div {
width:250px;
background-color:lime;
padding:10px;
font-weight:bold;
font-size:20pt;
}
div:active {
animation-delay: 0s;
animation-duration: 3s;
animation-iteration-count: 2;
animation-name: demo;
}
@keyframes demo {
from {
animation-timing-function: ease;
}
50% {
background-color: purple;
animation-timing-function: ease-in;
transform: translate(20px,30px);
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>CSS Animation Events Example</h1>
<p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
<div id="mydiv">
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
</div>
<script>
var divObj = document.getElementById("mydiv");
divObj.addEventListener("animationstart", function (
) {
this.innerHTML = "This is the animation start event";
}, false);
divObj.addEventListener("animationend", function () {
this.innerHTML = "This is the animation end event";
}, false);
divObj.addEventListener("animationiteration", function () {
this.innerHTML = "This is the animation iteration event";
}, false);
</script>
</body>
</html>
API Reference
Samples and tutorials
How to bring your webpage to life with CSS transforms, transitions, and animations
Internet Explorer Test Drive demos
Bringing pages alive with CSS Transforms & Animations
IEBlog posts
Adding Personality with CSS3 Transitions and Animations
Full-page Animations Using CSS