The 'animation' shorthand property is a comma-separated list of animation definitions. Each item in the list gives one item of the value for all of the subproperties of the shorthand, which are known as the animation properties.

]]> The 'animation-delay' property defines when the animation will start. It allows an animation to begin execution some time after it is applied, or to appear to have begun execution some time before it is applied.
The defines how long of a delay there is between the start of the animation (when the animation is applied to the element via these properties) and when it begins executing. A delay of 0s (the initial value) means that the animation will execute as soon as it is applied.
A negative delay is valid. Similar to a delay of 0s, it means that the animation executes immediately, but is automatically progressed by the absolute value of the delay, as if the animation had started the specified time in the past, and so it appears to start partway through its active duration. If an animation's keyframes have an implied starting value, the values are taken from the time the animation starts, not some time in the past.

]]> The 'animation-direction' property defines whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an 'ease-in' animation would appear to be an 'ease-out' animation.

]]> The 'animation-duration' property defines duration of a single animation cycle.
The 'time' specifies the length of time that an animation takes to complete one cycle. A negative time is invalid.
If the 'time' is 0s, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. Specifically, start and end events are fired; if 'animation-fill-mode' is set to 'backwards' or 'both', the first frame of the animation, as defined by 'animation-direction', will be displayed during the 'animation-delay'. Then the last frame of the animation, as defined by 'animation-direction', will be displayed if 'animation-fill-mode' is set to 'forwards' or 'both'. If 'animation-fill-mode' is set to 'none' then the animation has no visible effect.

]]> The 'animation-fill-mode' property defines what values are applied by the animation outside the time it is executing. By default, an animation will not affect property values between the time it is applied (the 'animation-name' property is set on an element) and the time it begins execution (which is determined by the 'animation-delay' property). Also, by default an animation does not affect property values after the animation ends (determined by the 'animation-duration' and 'animation-iteration-count' properties). The 'animation-fill-mode' property can override this behavior. Dynamic updates to the property will be reflected by property values as needed, whether during the animation delay or after the animation ends.

]]> The 'animation-iteration-count' property specifies the number of times an animation cycle is played. The initial value is 1, meaning the animation will play from beginning to end once. This property is often used in conjunction with an 'animation-direction' value of 'alternate', which will cause the animation to play in reverse on alternate cycles.

]]> The 'animation-name' property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute. Furthermore, if the animation name is none then there will be no animation. This can be used to override any animations coming from the cascade. If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.

]]> The 'animation-play-state' property defines whether the animation is running or paused.

]]> The animation-timing-function property describes how the animation will progress between each pair of keyframes.

]]>