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-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:
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
- Animatable: no
- 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.
The following are valid
/* 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;
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;
The following example applies a ‘falling down’ effect to a piece of text using the shorthand
@keyframes entry out for more information on how the animation effect is created, and for more examples of animations.
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com
In Chrome, the
animation shorthand property is supported prefixed with the
-webkit- prefix, while the longhand properties are supported unprefixed.