Transitions and Animations 175
Figure 14-5 shows three stages of the transition: The first stage (left)
shows the element pre-transition, with a black background and positioned
at the bottom left of its parent element; the next stage (center) is mid-
transition, as the element is changing color and moving to the top right
of its parent; and the final stage (right) shows the element post-transition,
with a silver background and in its final position.
Figure 14-5: Three stages of an animated transition on the background-color, left, and
top properties
Animations
Transitions are good but naturally limited; they are only applied when a
property value changes. The CSS3 Animations Module (http://www.w3.org/
TR/css3-animations/) goes beyond what is possible with transitions, allow-
ing animations to be applied directly to elements with a syntax that is more
flexible and permits more granular control. Animations and transitions
have quite a lot of syntax in common, but the process for creating anima-
tions is very different: First, you define the properties and timings, and then
you add the animation controls to the elements that will be animated.
noTe CSS animations are implemented in IE10+ and all other modern browsers, but, as of
the time of writing, you’ll still need to use the -webkit- vendor prefix for Chrome and
Safari, on both desktop and mobile.
Keyframes
You can think of CSS animations as a series of transitions, chained into a
sequence. The first step in creating your own animations is to define your
keyframes, which are the points that set the start and end of a transition. The
most simple animation has two keyframes—one at the start and one at the
end—whereas more complex ones have multiple keyframes in between.
Figure 14-6 illustrates how an animation with three keyframes would
appear.
In CSS, keyframes are declared in the @keyframes rule, which has the
following syntax:
@keyframes name {
selector { property : value; }
}
