Animations

[This documentation is preliminary and is subject to change.]

Windows Internet Explorer 10 Consumer Preview and Metro style apps using JavaScript support Cascading Style Sheets, Level 3 (CSS3) Animations. CSS3 Animations enable you to create visually appealing rich applications with smooth, fluid, animated experiences.

CSS3 Animations are defined by the World Wide Web Consortium (W3C) in the CSS Animations Module Level 3 specification, which is currently in the Working Draft stage.

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 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 Cascading Style Sheets (CSS) animation in Internet Explorer 10 and Metro style apps using JavaScript, and shows an example of CSS3 Animations in use.

Note  Because of the preliminary status of the CSS Animations Module Level 3 Working Draft, the properties in this section must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Metro style apps using JavaScript.

You can see CSS3 Animations in action by going to Hands On: Animations on the IE Test Drive.

This topic contains the following sections:

• Creating an animation
• Example
• Animations DOM Events
• Related topics

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 -ms-animation-name property

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

The -ms-animation-duration property

The -ms-animation-duration property specifies the length of time to complete one cycle of the animation. Its syntax is shown here:

The -ms-animation-timing-function property

The -ms-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:

The -ms-animation-iteration-count property

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

The -ms-animation-direction property

The -ms-animation-direction property specifies the direction of play for an animation cycle. The property's syntax is shown here:

The -ms-animation-play-state property

The -ms-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:

The -ms-animation-delay property

The -ms-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:

The -ms-animation-fill-mode property

The -ms-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 -ms-animation-delay property). Also, by default, an animation does not affect property values after the animation ends (after the time defined by the -ms-animation-duration property has elapsed). The -ms-animation-fill-mode property is used to override these default behaviors. Its syntax is shown here:

The -ms-animation property

The -ms-animation shorthand property combines six of the animation properties into a single property. Its syntax is shown here:

Consider the following code example, which defines several animation properties on a div element:

div {
  -ms-animation-name: myAnimation;
  -ms-animation-duration: 3s;
  -ms-animation-timing-function: ease-out;
  -ms-animation-delay: -1s;
  -ms-animation-iteration-count: 2;
  -ms-animation-direction: normal;
}

With the -ms-animation shortcut property, you could specify all six of these properties on just one line, as shown here:

div {
  -ms-animation-name: 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 @-ms-keyframes rule specifies a list of property animation keyframes for an object, and specifies an identifier for the animation. Its syntax is shown here:

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

@-ms-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 -ms-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-ms-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 {
  -ms-animation-delay: 0s;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: 2;
  -ms-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.

@-ms-keyframes demo {
  from {
    -ms-animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    -ms-animation-timing-function: ease-in;
    -ms-transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

We've defined two properties to animate, background-color and -ms-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 Metro style apps using JavaScript define three animation Document Object Model (DOM) events:

MSAnimationStart

The MSAnimationStart event occurs at the beginning of the animation, accounting for any animation delay (as specified by the -ms-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
• Context Info: animationName (AnimationEvent)

MSAnimationEnd

The MSAnimationEnd event occurs when the animation finishes.

• Bubbles: Yes
• Cancellable: Yes
• Context Info: animationName, elapsedTime (AnimationEvent)

MSAnimationIteration

The MSAnimationIteration event occurs at the end of each iteration of an animation. This event only occurs when the -ms-animation-iteration-count property is greater than one.

• Bubbles: Yes
• Cancellable: Yes

Related topics

Hands On: Animations

CSS

Internet Explorer 10 Guide for Developers

Build date: 3/14/2012