Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
CSS animations are essentially enhanced transitions. You have more options, more control, and more flexibility in how you move from one CSS style to another. Table 23-3 describes the animation properties.
The format for the animation shorthand property is as follows:
animation: <animation-name> <animation-duration> <animation-timing-function>
<animation-delay> <animation-iteration-count>
Notice that none of these properties allow you to specify the CSS properties that will be animated. This is because animations are defined in two parts. The first part is contained within the style declaration and uses the properties shown in Table 23-3. This defines the style of the animation, but not what is to be animated. The second part is created with the @key-frames rule, and is used to define the set of properties that the animation will apply to. You can see both parts of the animation in Listing 23-5.