Animating with CSS Keyframes - Beginning CSS3 - page 464

Table 21-1. CSS Animation Properties

Property Initial Value Description

animation-name none 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.

animation-duration 0s Sets the duration of an animation.

animation-timing-function ease 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.

animation-iteration-count 1 Sets the number of times an animation should run. The value

can be a number or the keyword infinite .

animation-direction normal Determines whether an animation should run in reverse on

some cycles.

animation-play-state running Defines whether an animation is running. Accepted values

are running and paused .

animation-delay 0s 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.

animation-fill-mode none Defines which property values to apply to the element before

the animation begins (if delayed) and after it ends.

animation Shorthand property that defines all the properties of an

animation except animation-play-state in a single
declaration.

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:

animation-name: highlight;