animation

The animation CSS shorthand property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline.

The animation property is specified as one or more single animations, separated by commas. Each animation within the comma-separated list of animations sets the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline. If any of the components are not included in an animation declaration, the component value is set to the component’s initial value.

Note: The animation shorthand property resets the animation-range-start, animation-range-end and animation-trigger properties to their initial values; normal, normal and none, respectively. These reset-only sub-properties cannot be set in the animation shorthand, and including them invalidates the entire declaration. Because the animation declaration sets each of these properties to their initial values, they must either be declared after any animation shorthand declarations or with greater specificity.

Syntax example: iteration-count | direction | fill-mode | play-state | name */