Bring your page to life with CSS animations

Cascading Style Sheets (CSS) animations enable you to do more than just smoothly change CSS properties over time (CSS transitions already do this). They also offer you the ability to design complex animations using keyframes, as well as more fine-grained control via scripting. Generally, CSS animations enable much more interesting and living web content while providing better rendering performance when compared to traditional JavaScript-driven animation practices.

The @keyframe rule

The main way that CSS animations are different from CSS transitions is the @keyframes rule. It allows you to specify the values a CSS property needs to have at different points during the animation. Let's look at a basic example.

@keyframes fadeOut {
  from {    
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.TransformDemoDivFadeOut:hover {
  animation-duration: 2s;
  animation-name: fadeOut;
}

Following is a screen shot of this example page. You can also view a live version of this example. Simply hover your cursor over the square (or tap it with your finger), and the square will slowly fade away.

The @keyframes rule, followed by an identifier that you choose, defines an animation. Inside the rule, you can define several keyframes, or points during the animation at which you provide fixed values for certain CSS properties. In the previous example, we used the from and to keywords to define the start and end points of an animation. Inside the keyframes, we can set our desired values for different properties (in our case we want the element's opacity to start at 1 and animate to 0, effectively fading out the element). As an alternative to the from and to keywords, you can also use 0% and 100% when setting the beginning and end values of your animations. If either the from (or 0%) or to (or 100%) keyframes are missing, the normal style values of the element will be used in their place.

After you've defined the @keyframes rule in our style, you trigger the animation by setting the animation-name property on the element to be animated. In this example, you want the element to animate on hover, so use the :hover CSS pseudo-class. Additionally, use the animation-duration property to set the duration of the animation.

In the previous example, we used a CSS animation to achieve the same effect as a CSS transition (and, in fact, used a bit more markup to do so). One of the main differences between CSS animations and transitions is the ability to define the desired values for different CSS properties at different points during an animation, whereas a transition only allows us to specify the start and end values.

Using multiple keyframes for rich animations

Consider the following @keyframes rule:

@keyframes fadeOutInOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Following is a screen shot of this example page. You can also view a live version of this example. Simply hover your cursor over the square (or tap it with your finger), and the square will fade away, then fade back into view, and then fade away again.

Unlike with CSS transitions, you aren't forced to animate in one direction (from beginning to end) with CSS animations. Also, you aren't limited to animating all the desired properties at the same time. Let's look at another example.

@keyframes fadeOutInOutSwirl {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.5;
    transform: rotateZ(0deg); 
  }
  75% {
    opacity: 0.5;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 1.0;
    transform: rotateZ(360deg);
  }
}

Following is a screen shot of this example page. You can also view a live version of this example. Simply hover your cursor over the square (or tap it with your finger), and the square will fade halfway, twirl counterclockwise, twirl again counterclockwise, and then fade back.

Notice how the markup for this example animates the opacity for the first quarter of the animation (from 0% to 25%), and then both manipulates opacity and rotates the element for the remainder of the animation. Through this flexibility, CSS animations enable you to generate rich, fluid, and resource-efficient Web content.

CSS animation properties

The CSS Animations specification provides a number of properties that provide fine-grained control over our animated content.

The last property defined here, animation-timing-function, enables us to define a Bezier curve that specifies how fast the animated values change. In a keyframe animation, this function is applied between keyframes. Additionally, animation-timing-function can be used inside a keyframe definition, and therefore only applies for the transition from that keyframe to the next one.

Internet Explorer 10 includes several built-in function definitions (for instance, ease, linear, ease-in, ease-out, and so on), as well as a cubic-bezier() function that allows you to specify your own timing functions.

Let's look at some examples of these timing functions in action. This example page has a row of squares, each with the same animations applied to it, but with a different timing function. Notice the slight speed variations of each animation.

You can also visit our CSS Animations hands-on, which allows you to directly manipulate timing functions.

JavaScript events

The CSS Animations module specifies three JavaScript events that might fire during an animation's lifetime.

You can listen to an animation event just as you listen to other JavaScript events. Take a look at the following code example:

element.addEventListener(
  "animationstart",
  function () { window.alert("Animation started!") }
);

This example triggers an alert box after an animation starts on the target element. The context info for the event carries the animation name (animationName) and optionally an elapsedTime variable that stores the time passed since the animation triggered.

You can view a live version of this example. Simply hover your cursor over the square (or tap it with your finger), and the square will fade halfway, twirl counterclockwise, twirl again counterclockwise, and then fade back.

Related topics

To learn more about CSS animations, check out the following reference sources:

• Internet Explorer Dev Center: CSS3 Animations
• Internet Explorer 10 Guide for Developers: CSS3 Animations
• Hands-on: Windows 8 HTML5 Platform
• W3C: CSS3 Animations specification