The animation property is a shorthand property for setting the longhand animation properties:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state
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
::beforeand::afterpseudo-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.
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
- 131
- No
- 131
- 132
Notes
In Chrome, the animation shorthand property is supported prefixed with the -webkit- prefix, while the longhand properties are supported unprefixed.
