CSS Reference Property

animation

The animation property is a shorthand property for setting the longhand animation properties:

It takes one or multiple comma-separated values, where each value calls and controls a @keyframes animation using the longhand animation properties. The @keyframes rule defines the actual animation sequence, and is controlled by the animation properties.

/* syntax of one animation definition */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

/* two animation definitions */
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state],
           [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
                

The longhand properties are space-separated, and their order doesn’t matter except when using both animation-duration and animation-delay, they need to be in that order. So, if you specify two <time> values in your definition, the first one will be considered the animation duration, and the second one will be considered the animation delay.

Any value that you don’t explicitly set will be set to its default value. That is why you have to specify an animation name otherwise no animation will be applied. If you don’t apply an animation duration, it will default to ‘0s’, and the animation effect occurs instantaneously and thus the keyframes have no effect.

Trivia & Notes

Animations can be applied to only a subset of all CSS properties. The following are two resources listing the animatable properties in CSS:

Official Syntax

  • Syntax:

    animation: <single-animation># 
    /* where */
    <single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || <single-animation-name>
  • Initial: none 0s ease 0s 1 normal none; which is the concatenation of the initial values of each of the longhand properties
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no

Values

<single-animation>#
One or multiple comma-separated animation definitions, where each definition is defined using the longhand animation properties. See the longhand properties’ entries for more information about the possible values for each.

Examples

The following are valid animation declarations:

/* one animation */
animation: bounce .3s ease-in-out 1s infinite;
animation: rotate-out 1s steps(3, end);
animation: .3s ease 1s reverse open-up;

/* multiple animations */
animation: shake .3s alternate,
           jump 1s cubic-bezier(.17,.67,.85,.06) alternate;
                

The animation: bounce .3s ease-in-out 1s infinite; declaration is equivalent to:

animation-name: bounce;
animation-duration: .3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
                

Live Demo

The following example applies a ‘falling down’ effect to a piece of text using the shorthand animation property.

Check the @keyframes entry out for more information on how the animation effect is created, and for more examples of animations.

View this demo on the Codrops Playground

Browser Support

CSS Animation

Complex method of animating certain properties of an element

W3C Working Draft

Supported from the following versions:

Desktop

  • 43
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet

  • 9.0
  • 56
  • No
  • 59
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Notes

In Chrome, the animation shorthand property is supported prefixed with the -webkit- prefix, while the longhand properties are supported unprefixed.

Written by

Last updated February 26, 2017 at 9:22 am by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.