HTML and CSS Reference
In-Depth Information
Summary
The animations in this chapter are unlikely to win any awards—except perhaps the wooden spoon. They've been
designed to show the principles behind creating CSS animations. You define an animation as a set of keyframes
using an
@keyframes
rule, which specifies the values of properties at key points during the animation. Once
you have defined the keyframes, you apply the animation to one or more elements using animation properties
that specify which set of keyframes to use, the length of the animation, how many times it should run, and other
settings, such as whether to preserve the values of the final keyframe when the animation ends.
Defining the keyframes separately from the elements to which they're applied allows you to reuse
animations. You can also run multiple animations on an element, either consecutively, or in sequence by
delaying the start of each subsequent animation until the previous one has finished.
There's a risk that CSS animations will turn back the clock to the early days of the Web when spinning
icons were all the rage. However, subtle animations can add interest to a page or draw attention to information
that has been updated. Keep animations short by limiting the number of iterations, and trigger them using
pseudo-classes or JavaScript events.
In the final chapter, we'll take a look at other CSS3 features that are on the horizon, including Flexible Box
Layout, which promises to solve many of the current problems of web page layout.
