182 Chapter 14
To make the example I’ve been building in this chapter somewhat more
compact, I can use this shorthand code:div { animation: expand 6s ease-in 2s 10 alternate both running; }That may still seem verbose, but at its most simple, only two values are
required for the animation property to function: the name of the keyframe
and a duration:div { animation: expand 6s; }The Complete Animations Example
With all of the properties explained, let’s take a look at the full example
animation in action. Here’s the CSS (some rules have been omitted for
brevity; see the example files for the complete code):@keyframes expand {
0% { border-width: 4px; }
50% { border-width: 12px; }
100% {
border-width: 4px;
height: 100%;
width: 100%;
}
}
div {
...
animation: expand 6s ease 0 infinite alternate;
}Unfortunately, I can’t show animation in this book, so I’ll settle for
describing it. Figure 14-8 shows the state of the element at three of the
animation’s keyframes: The keyframe at 0% () shows the element with a
border-width of 4px and the inherited height and width (100px each, not shown
here); in the 50% keyframe (), the border-width is increased to 12px; and in
the final, 100% keyframe (), the border-width returns to 4px and both height
and width have changed to 100%.Figure 14-8: Three stages of an animation affecting the border-width, height, and width
properties