Animations

Internet Explorer 10 and Windows Store 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 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.

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:

PropertyDescription

animation-name

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:

PropertyDescription

animation-duration

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:

PropertyDescription

animation-timing-function

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(x1,y1,x2,y2)

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 P1 and P2 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:

PropertyDescription

animation-iteration-count

Specifies the number of times an animation cycle is played. Multiple values are separated by commas.

<number>

The number of times the animation cycle is played. You can specify a non-integer number and the animation will end at some point during a cycle. The initial value is "1".

infinite

The animation repeats forever.

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:

PropertyDescription

animation-direction

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:

PropertyDescription

animation-play-state

Defines whether the animation is running or paused. This property can be set to one or more of the following comma-separated values:

paused

Pauses a running animation. The animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant.

running

Continues running a paused animation. The animation restarts from the current value.

 

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:

PropertyDescription

animation-delay

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:

PropertyDescription

animation-fill-mode

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:

none

The default behavior is unchanged.

forwards

The final property value (as defined in the last keyframe) is maintained after the animation completes.

backwards

The beginning property value (as defined in the first keyframe) is applied before the animation is displayed, during the period defined by animation-delay.

both

Both forwards and backwards fill modes are applied.

 

The animation property

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

PropertyDescription

animation

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:

RuleDescription

@keyframes

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 Store 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.

animationend

The animationend event occurs when the animation finishes.

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 animationend, 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

Animations

Samples and tutorials

How to bring your webpage to life with CSS transforms, transitions, and animations

Internet Explorer Test Drive demos

Hands On: Animations
Bringing pages alive with CSS Transforms & Animations
Beta Fish IE

IEBlog posts

Adding Personality with CSS3 Transitions and Animations
Full-page Animations Using CSS
CSS3 3D Transforms in IE10

Specification

CSS Animations

Related topics

Build Awesome Apps with CSS3 Animations
CSS3 Animation With jQuery Fallbacks

 

 

Show:
© 2014 Microsoft