HTML and CSS Reference
Table 21-1. CSS Animation Properties
Selects an animation defined in an @keyframes rule and
applies it to the element. Setting the value to none overrides
an animation coming from the cascade.
Sets the duration of an animation.
Sets the pace of the transition to the next keyframe, as
described in the previous section. Can also be used to set the
default timing function for keyframes.
Sets the number of times an animation should run. The value
can be a number or the keyword infinite .
Determines whether an animation should run in reverse on
Defines whether an animation is running. Accepted values
are running and paused .
Specifies when an animation should start. A positive value
plays the animation from the beginning after the specified
delay. If a negative time is used, the animation starts
immediately, but part way through its play cycle at the point
it would have reached after the specified offset.
Defines which property values to apply to the element before
the animation begins (if delayed) and after it ends.
Shorthand property that defines all the properties of an
animation except animation-play-state in a single
To apply an animation to an element, both animation-name and animation-duration are required (or their
values specified in the animation shorthand property). All other properties are optional.
All the properties in Table 21-1 accept a comma-separated list of values to apply multiple animations to
the same element. Values are applied to animations in the same order as specified in animation-name . If fewer
values are specified for a property than the number of animation names, the browser cycles through them in the
same way as for CSS transitions. Excess values are ignored. There's an example of using multiple animations in
“Applying Multiple Animations” at the end of this chapter.
The properties in Table 21-1 are not inherited, so you can use the inherit keyword if you want an element to
inherit the same values as its parent.
Specifying Which Animation to Use
The animation-name property takes as its value one or more names of @keyframes rules. For example, to apply
the highlight keyframes to an element, just set the value of animation-name like this in the element's style rule: