Partager via

Bring your page to life with CSS animations

  • Article

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.

Property Description

animation

Specifies a shorthand value that defines all animation properties (except animation-play-state).

animation-delay

Specifies the offset within an animation cycle (the amount of time from the start of a cycle) before the animation is displayed. Values for this property should be in seconds (appended with "s"—for example, animation-delay: 2s;)

animation-direction

Specifies the direction of play for an animation cycle. Setting animation-direction to "normal" will result in the animation performing as expected (properties animating from their values at 0% to 100%). Setting it to "reverse" achieves the opposite effect. The values "alternate" and "alternate-reverse" result in the animation alternating between the "normal" and "reverse" modes in a multi-iteration setting.

animation-duration

Specifies the length of time to complete one cycle of an animation. Values for this property should be in seconds (appended with "s"—for example, animation-duration: 2s;)

animation-fill-mode

Specifies whether the effects of an animation are visible before or after it plays. This property defines the CSS properties that are applied to the element at the end of an animation. When set to "none" (the initial value), an animating element will return to its original stylistic properties after the animation is complete. Setting this property to the "forwards" value specifies that the final values of the animation (the ones specified in the "to" or "100%" keyframes) are applied when it is complete.

animation-iteration-count

Specifies the number of times an animation cycle is played. Setting this property to "infinite" will make the animation run indefinitely.

animation-name

Specifies one or more animation names. An animation name identifies (or selects) a CSS @keyframes at-rule.

animation-play-state

Specifies whether an animation is playing or paused. This property enables you to pause an animation by setting the property's value to "paused" and resume it by setting it to "running". Be aware that resetting the animation-play-state of a completed animation to "running" will not restart it. To restart an animation, you must re-add it to the element.

animation-timing-function

Specifies the intermediate property values to be used during a single cycle of an animation.

 

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.

Event Description

animationstart

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

Occurs when the animation finishes.

animationiteration

Occurs at the end of each iteration of an animation. This event only occurs when the animation-iteration-count property is set to a value greater than 1.

 

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.

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