CSS ANIMATIONS

AND TRANSITIONS
for the Modern Web

STEVEN BRADLEY

PEACHPIT PRESS
x GETTIN G STARTED

CHAPTER 4

ANIMATIONS
CSS transitions offer you a way to create simple animations that always start
as the result of triggering a CSS property change. Transitions can animate only
between a start and end state, and each state is controlled by existing CSS prop-
erty values. For example, a transition that runs on hover transitions between
values on the element and values on the hover state of the element. Overall,
transitions are a simple way to animate but offer little control over the animation.

CSS animations provide a bit more control. They allow for the creation of mul-
tiple keyframes (Figure 4.1) over which the animation occurs. While they
can start in reaction to a change in CSS property value, they can also run on
their own. An animation executes as soon as the animation property is
applied.
94 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Figure 4.1
Animation keyframes

Transitions don’t change property values; they define how the change occurs.
Animations can change property values inside each keyframe.

Transitions change implicitly. You define things at the start and end states, and
you leave it to the browser to determine all the intermediate states. Animations
change explicitly. The animation can define start and end states as well as some
intermediate states. The browser still determines the intermediate states between
keyframes, but the animation gets to define as many keyframes as it wants.
All the things you could change when working with transitions, you can still
change when working with animations. You determine how long the anima-
tion lasts and what timing-function to use between keyframes. You also
get to delay the animation if you like.

In addition, you can decide how many times the animation should run and
in which direction it should run. You can set the animation to be running or
paused. You can even determine which CSS property values apply outside the
time frame in which the animation runs.
Animations have other benefits over transitions as you’ll see in this chapter.
In general, these benefits are about giving you more control. Transitions have
advantages over CSS animations, too. In general, they’re about the simplicity
of transitions.
 CHAPTER 4 ANIMATIONS 95

Browser Support
Browser support for CSS animations is good. It’s similar to what you saw ear-
lier for transforms and transitions. CSS animations work in all modern brows-
ers. In IE10 and newer, Firefox, and IE Mobile, no vendor prefixes are needed.
Safari, Chrome, Opera, iOS Safari, Android Browser, and Blackberry Browser
all use the -webkit vendor prefix, so you have only the one prefix to deal with.
The animation-fill-mode property isn’t supported in Android below version
2.3. In iOS 6.1 and earlier, animations aren’t supported on pseudo-elements.
As you probably expect by this point, the holdouts are Opera Mini and IE9
and earlier. Unfortunately, there’s no polyfill like there was for transforms
and transitions. The fallback is to create the animation using JavaScript: You
first check to detect CSS animation support and then use one of the available
JavaScript libraries for working with animation.

JavaScript animation is beyond the scope of this book, but the following sec-
tion gives you to a few places where you can find more information.

Detecting Browser Support

Here are some resources for detecting support as well as some JavaScript ani-
mation libraries:
◆ https://hacks.mozilla.org/2011/09/detecting-and-generating-css-
animations-in-javascript
◆ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/
Using_CSS_animations/Detecting_CSS_animation_support

Finding JavaScript Libraries for Animation

The most popular library is—without doubt—jQuery, although it’s not the most
performant way to create animations with JavaScript. Here are some other options:
◆ http://api.jquery.com/animate
◆ www.polymer-project.org/platform/web-animations.html
◆ https://github.com/web-animations/web-animations-js
◆ http://updates.html5rocks.com/2014/05/Web-Animations---
element-animate-is-now-in-Chrome-36
96 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

You could create animations for every browser using JavaScript and ignore
CSS animations completely. If you’re using JavaScript to create the animation
for some browsers, why not use JavaScript for all browsers and not worry so
much about CSS animation support? CSS animations are usually, though not
always, more performant than the same animation in JavaScript.
Another option, and the one I recommend, is to treat CSS animations as part
of the noncritical experience. Use animations to enhance the design and the
design’s aesthetic, but make sure nothing breaks in browsers that don’t support
CSS animations. Your site should still work in any browser that doesn’t support
animations, but it can provide a more enjoyable experience for those that can.
Note that while CSS animations work in modern browsers, you don’t neces-
sarily see the same smoothness. A smooth-running animation in one browser
might look a bit jerky in another, and it’s not always the same browsers looking
smooth or not. It depends on the browser and the specifics of the animation.

CSS Animations
As we’ve been doing throughout this book, let’s start with an example.

CSS Positioning
You’ll make a box slide across the screen from left to right in two ways. The
first way will be to use CSS positioning (Example 4.1).

1. Add a div with a class of box to your HTML.

<div class="box"></div>

2. Give the .box div dimensions and a background color so you can see it
on the page. Set its position to absolute. Top and left values will be 0
by default, which is fine for this example.
.box {

width: 200px;

height: 200px;
background-color: #393;

position: absolute;

}
 CHAPTER 4 ANIMATIONS 97

You need two components to create the animation. The first one declares
the animation on .box. Part of the benefit of the animation property is
the name of a keyframe where you’ll change properties, so you also need
to create this keyframe, which is the second component.

3. Add the animation property to .box.

.box {
-webkit-animation: slide 5s linear 0s 3;

animation: slide 5s linear 0s 3;

The first value in the list is slide, which is the name of your keyframe.

4. Create the slide keyframe.

@-webkit-keyframes slide {

from {
left:0
}

to {
left: 600px
}

@keyframes slide {

from {
left: 0;
}

to {
left: 600px;
}

}
98 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

5. Load the file in a browser.

A green square appears in the upper-left corner of your browser. As soon

as the page loads, it moves 600 pixels to the right, jumps back to the upper-
left corner, slides to the right again, and repeats a third time before finally
returning to the upper-left corner and stopping (Figure 4.2).

Figure 4.2
Slide animation using the
left property

from { to {
left: 0; left: 600px;
} }

The animation itself probably wasn’t very smooth, but you’ll get to that in a
moment. Let’s talk about what the code is doing, starting with the keyframe.

The keyframe has the name slide. It includes two declarations for the left
property, once in a from state and once in a to state. In the from state, the
left value is 0, and in the to state, the value is 600px. The states from and
to represent the start and end states, so initially the .box is positioned 0 pix-
els from the left edge, and at the end of the animation cycle, it is 600 pixels
from the left edge.

To start the animation, you set the animation shorthand property on the .box div.

animation: slide 5s linear 0s 3;

The animation is calling the keyframe named slide, and it runs for a dura-
tion of 5 seconds. The timing-function is linear. There’s no delay, and the
animation is set to run three times.

Smoothing the Animation

What about the jumpiness in the animation? Let’s modify the example to move
the .box with a transform instead of changing the value of the left property
(Example 4.2). You need to adjust only the keyframe.
 CHAPTER 4 ANIMATIONS 99

1. Replace the keyframe in step 4 of Example 4.1 with the following keyframe:

@-webkit-keyframes slide {

to {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);

transform: translate(600px, 0px);

@keyframes slide {

to {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);

transform: translate(600px, 0px);

In this code, the translate function moves the .box div 600 pixels to
the right, the same as the left values did in the previous @keyframes
rule. Notice that only the to state is included this time. You don’t need to
include a from state. You really didn’t need it the first time either. The ini-
tial state of the .box div as set on the .box class is exactly what you want
for the from state, so there isn’t a need to explicitly set it in the keyframe.

2. Reload your page with this new keyframe.

The same thing happens as before: A green .box moves 600 pixels to the
right three times (Figure 4.3). However, this time the animation runs
smoother. We’ll get to why at the end of the chapter. For now just know
there are multiple ways to create an animation (or a transition), but the
performance of each way can vary.
100 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Figure 4.3
Slide animation using
translate function

from { to {
} -webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}

As you can see in the example, animations can reset CSS property values inside
their keyframes. Transitions can’t do this. Although CSS animations affect
property values while running, they don’t by default control values before the
animation starts or after it ends. By default, the intrinsic styles (styles added
directly to the element and not inside keyframes) of the element control the
values outside the time the animation is running. The styles set in the keyframe
are in control while the animation is running, but not necessarily before or
after. You do have a measure of control to change the default.
It’s possible to have multiple animations running at the same time and for each
animation to set different values on the same property. When this happens,
the animation defined last in the list of keyframe names overrides the other
animations, and the value it sets is used.
Animations can start in one of two ways:
◆ On page load
◆ In reaction to a CSS property change
The start time of an animation is the latter of the time when the style speci-
fying the animation changes (changing the element on hover for example) or
the time the document’s load event is fired—in other words, automatically
after the page has loaded.
 CHAPTER 4 ANIMATIONS 101

he @Keyframes Rule
Keyframes are the different states of the element being animated. They’re used
to specify different values for the properties being animated at various points
during the animation. A series of keyframes defines the behavior for one cycle
through the animation. Remember animations can repeat multiple times.
You define keyframes inside the @keyframes rule.

@keyframes identifier {
List of properties and values

An @keyframes rule begins with the @keyframes keyword followed by an

identifier (the keyframe name). Inside the brackets is a list of CSS properties
and values to set the style for the specific states.

Inside each @keyframes rule is a list of percent values or the keywords to and
from. The keyword from is equivalent to 0%, and the keyword to is equivalent
to 100%. When using a percent, the % sign needs to be included. 0 and 100
are invalid values; 0% and 100% are the correct values.

@Keyframes slide {

0% {
left: 0;

20% {

left: 100px;

40% {

left: 200px;
}
102 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

60% {

left: 300px;

80% {

left: 400px;

100% {

left: 500px;

This @keyframes rule could also be written as

@Keyframes slide {

from {

left: 0;

20% {

left: 100px;

40% {

left: 200px;

60% {

left: 300px;

}
 CHAPTER 4 ANIMATIONS 103

80% {

left: 400px;

to {

left: 500px;

Each keyframe selector specifies the percentage of the animation’s duration Note
that the specific keyframe represents. The keyframe state is specified by the I’m using the words
group of properties and values declared on the selector. “keyframe” and
“keyframes” in ways that
If you don’t set a keyframe at 0% (or from), then the browser constructs a 0% might be confusing.
state using the intrinsic values of the properties being animated. Similarly if Each percentage value
no 100% (or to) keyframe is set, the browser constructs the state from intrin- represents a new
keyframe or state with
sic values. Negative percent values or values greater than 100% are ignored.
its own CSS property
Keyframes containing properties that aren’t animatable or contain invalid values. Together the
properties are ignored. properties and values in
each keyframe make up
@keyframes rules don’t cascade. A single animation will never use keyframes a keyframe declaration
from more than one @keyframes rule. When multiple @keyframes have been block. he @keyframes
specified on the animation-name property, the last one in the list (ordered by rule is the special
@ rule that contains all
time) with a matching @keyframes rule controls the animation. the different keyframes
(states) that an animation
It’s valid for an @keyframes rule to be empty, and because of this it can be
runs through.
used to hide keyframes previously defined. The empty @keyframes rule should
come later in your CSS to override any @keyframes rule with the same iden-
tifier that appears earlier in your CSS.

1. Add the following after the @keyframes rules you set in Example 4.1.

@-webkit-keyframes slide {

@keyframes slide {

}
104 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

2. Reload your webpage. The animation should no longer run, since an empty
@keyframes rule is called.

3. Remove the empty @keyframes rule or place it before the nonempty

@keyframes rule, and the animation will run again.

animation-* Properties
CSS animations offer eight different properties for controlling an animation.
Some are comparable to similarly named transition-* properties, and some
will be new.

animation-name Property
The animation-name property defines a comma-separated list of animations
to apply to the given selector. It’s similar to the transition-property in that
it ultimately defines the properties that are animated. With the transition-
property, those properties are explicitly named. With the animation-name,
an @keyframes rule is explicitly named, and that rule contains the properties
that will be animated.

-webkit-animation-name: slide, drop;

animation-name: slide, drop;

Each animation-name in the list should match a specific @keyframes rule.

@-webkit-keyframes slide {

properties: values;

@keyframes slide {

properties: values;

}
 CHAPTER 4 ANIMATIONS 105

@-webkit-keyframes drop {

properties: values;

@keyframes drop {

properties: values;

If there’s no match in keyframe name (identifier), the animation won’t run. In

addition to the identifier of an @keyframes rule, a value of none is also valid.
When the none keyword value is used, no animation runs. You can use none
to override an animation that’s inherited from a parent element.

-webkit-animation-name: none;

animation-name: none;

@keyframes change the value of CSS properties. If multiple animations try

to change the value of the same property on an element, the animation clos-
est to the last name in the animation-name list controls the property values.

If multiple animation-names are listed and one is removed, it stops running,

but the other listed animations continue.

Every listed animation-name should have a corresponding value for any oth-
er animation-* properties. If there are too many values in an animation-*
property, any leftover values are ignored. If there aren’t enough values, the list
of values will be repeated until there are enough to match.

Animations are applied to elements with an animation-name value that match-

es the name of an @keyframes rule. Once applied, the animation runs. It runs
once the page loads unless it’s been applied to a trigger, such as :hover. Once
started, an animation continues to run until it finishes or the animation-name
value is removed, such as removing the :hover on the animating element.

An animation ends based on some combination of the animation-duration,

animation-iteration-count, and animation-fill mode properties. You
can also end an animation by setting the animated element’s display prop-
erty to none. This also ends any animations running on descendant elements.
106 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Note Changing the value of an animation element’s display property to something

When an animation-
other than none immediately starts that animation. It also starts any animations
name is added to the applied to descendants of the parent element. Changing the value of display
:hover state of an is one more way you can turn on and off an animation.
element, removing the
hover also removes the The values in each keyframe in an @keyframes rule are held as a snapshot
animation-name, and when the animation starts. Changing the intrinsic property on an element
the animation stops.
with an animation running has no effect. The values in the animation are in
control until the animation stops.

animation-duration Property
The animation-duration property defines how long an animation lasts
during one cycle of the animation. It’s similar to the transition-duration
property and takes a time value in seconds (s) or milliseconds (ms).

-webkit-animation-duration: 10s;

animation-duration: 10s;

Like transition-duration, the default value is 0s, which is why elements

don’t animate automatically even when they’re animatable. Technically, they
are animating, but everything happens in an instant.

Note that animation-duration is the length of one full cycle of the animation.
It’s not the length of each keyframe in the @keyframes rule. For example, if you
set an animation-duration of 10s and have the following @keyframes rule

@Keyframes duration {

0% {

property: value;

50% {
property: value;
}
 CHAPTER 4 ANIMATIONS 107

100% {

property: value;

the animation will take 10 seconds to get from 0 percent to 100 percent, and
not 10 seconds to go from 0 percent to 50 percent and then 10 seconds more
from 50 percent to 100 percent.

Similarly, when an animation is set to loop multiple times, the animation-

duration is the time it takes to complete one loop or cycle.

animation-timing-function Property
The animation-timing-function property describes an acceleration curve
for each keyframe in a single animation cycle. It’s similar to the transition-
timing-function. You can use any of the keyword timing functions or cre-
ate one of your own.

animation-timing-function: step-start;

animation-timing-function: step-end;

animation-timing-function: steps();

animation-timing-function: ease;

animation-timing-function: linear;

animation-timing-function: ease-in;

animation-timing-function: ease-out;

animation-timing-function: ease-in-out;

animation-timing-function: cubic-bezier();

Note that the animation-timing-function applies between keyframes and

not over the entire animation cycle. This means if you have keyframes at 0%,
50%, and 100% and an animation-timing-function of ease-in, the ani-
mation eases into each of the three keyframes in the @keyframes rule and
not just once at the beginning of the animation.
108 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Let’s try an example to see this more clearly (Example 4.3).

1. Add a div with a class of box to your HTML.

<div class="box"></div>

2. Give the .box class dimensions and a background-color.

.box {

width: 200px;

height: 200px;

background-color: #393;
}

3. Add an animation to the .box div using the individual animation-*

properties.
.box {

-webkit-animation-name: slide;

animation-name: slide;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

4. Finally add an @keyframes rule to your CSS.

@-webkit-keyframes slide {

0% {

-webkit-transform: translate(0px, 0px);

-ms-transform: translate(0px, 0px);

transform: translate(0px, 0px);

}
 CHAPTER 4 ANIMATIONS 109

25% {

-webkit-transform: translate(150px, 0px);

-ms-transform: translate(150px, 0px);

transform: translate(150px, 0px);

50% {

-webkit-transform: translate(300px, 0px);

-ms-transform: translate(300px, 0px);

transform: translate(300px, 0px);

75% {

-webkit-transform: translate(450px, 0px);

-ms-transform: translate(450px, 0px);

transform: translate(450px, 0px);

100% {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);

transform: translate(600px, 0px);

@keyframes slide {

0% {
-webkit-transform: translate(0px, 0px);

-ms-transform: translate(0px, 0px);

110 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

transform: translate(0px, 0px);

25% {
-webkit-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);

transform: translate(150px, 0px);

50% {

-webkit-transform: translate(300px, 0px);

-ms-transform: translate(300px, 0px);

transform: translate(300px, 0px);

75% {

-webkit-transform: translate(450px, 0px);

-ms-transform: translate(450px, 0px);

transform: translate(450px, 0px);

100% {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);

This code adds five keyframes to the @keyframes rule. This should make
it easier to see that the ease-in timing function is running between each
keyframe and not once over the entire animation cycle.
 CHAPTER 4 ANIMATIONS 111

5. Load your page in a browser, and observe the timing curve between key-
frames (Figure 4.4).

Figure 4.4
Animation timing functions

You can override the timing function inside each of the keyframes. When a
timing function is applied inside a keyframe, it’s instructing the animation
to use that function moving from the keyframe with the timing function
applied to the next one (Example 4.4).

6. Replace your @keyframes slide rule from Example 4.3 with the follow-
ing rule. Changes in the code are highlighted.
@-webkit-keyframes slide {

0% {

-webkit-transform: translate(0px, 0px);

-ms-transform: translate(0px, 0px);

transform: translate(0px, 0px);

25% {

-webkit-transform: translate(150px, 0px);

-ms-transform: translate(150px, 0px);

transform: translate(150px, 0px);

112 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

50% {

-webkit-transform: translate(300px, 0px);

-ms-transform: translate(300px, 0px);

transform: translate(300px, 0px);

75% {

-webkit-transform: translate(450px, 0px);

-ms-transform: translate(450px, 0px);

transform: translate(450px, 0px);

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

100% {

-webkit-transform: translate(100px, 0px);

-ms-transform: translate(100px, 0px);

transform: translate(100px, 0px);

@keyframes slide {

0% {

-webkit-transform: translate(0px, 0px);

-ms-transform: translate(0px, 0px);

transform: translate(0px, 0px);

}
 CHAPTER 4 ANIMATIONS 113

25% {

-webkit-transform: translate(150px, 0px);

-ms-transform: translate(150px, 0px);

transform: translate(150px, 0px);

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

50% {

-webkit-transform: translate(300px, 0px);

-ms-transform: translate(300px, 0px);
transform: translate(300px, 0px);

75% {

-webkit-transform: translate(450px, 0px);

-ms-transform: translate(450px, 0px);

transform: translate(450px, 0px);

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

100% {

-webkit-transform: translate(100px, 0px);

-ms-transform: translate(100px, 0px);

transform: translate(100px, 0px);

In this code, you override the ease-in timing function on two of the
keyframes.
114 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

7. Reload your page, and observe the difference in the acceleration curve
between keyframes (Figure 4.5).

Figure 4.5
Animation timing functions
on keyframes

The way timing functions work over keyframes and the ability to override them
on a specific keyframe is powerful and perhaps a bit scary. You have great con-
trol over how your animation accelerates, but you also have the responsibility
to exercise that control. Having an animation ease in between every keyframe
is probably not what you want.

animation-iteration-count Property
Transitions run once when triggered and run once in reverse when the trigger
is removed. Animations can run as many times as you want. The animation-
iteration-count property defines how many times an animation runs, and
it takes as a value any number or the keyword infinite. The latter sets your
animation to run in an endless loop.

-webkit-animation-iteration-count: 3;

animation-iteration-count: 3;

-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
 CHAPTER 4 ANIMATIONS 115

You’ve already seen the animation-iteration-count in action in Exam-

ple 4.1, although that example used the animation shorthand to set all the val-
ues. Because you might be getting tired of sliding boxes and because the rest
of the examples in this chapter are variations of that same sliding box, let’s do
something different here (Example 4.5).

1. Start by adding a div with a class of box to your HTML.

<div class="box"></div>

2. Instead of giving dimensions and a background-color to the .box div,

set the dimensions to 0px, and add a border with different colors for each
side. Finally, give the border a radius of 50%.
.box {

width: 0px;

height: 0px;

border-width: 100px;

border-style: solid;;

border-color: #393 #933 #399 #993;

border-radius: 50%;

3. Load your page.

A circle appears with four pie wedges, each a different color.

4. Add the following animation-* properties to .box. Note that you’ll be

rotating the .box div this time instead of moving it.
.box {

-webkit-animation-name: rotate;

animation-name: rotate;

-webkit-animation-duration: 4s;

animation-duration: 4s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;
116 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

-webkit-animation-iteration-count: 3;

animation-iteration-count: 3;

5. Create the rotate @keyframes rules to rotate the .box div.

@-webkit-keyframes rotate {

0% {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

25% {

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

50% {

-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);

transform: rotate(180deg);

75% {

-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);

}
 CHAPTER 4 ANIMATIONS 117

100% {

-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);

transform: rotate(360deg);

@keyframes rotate {

0% {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

25% {
-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

50% {
-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);
}
118 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

75% {

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);
}

100% {

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);
transform: rotate(360deg);

6. Load your code in a browser.

The circular .box div rotates around its center.

If you followed the colors in the example for the borders, the green wedge
should start at the top. Each time the green wedge is back at the top is one
Figure 4.6 iteration or one animation cycle (Figure 4.6).
Animation iteration count

0% { 50% { 100% {
transform: rotate(0deg); transform: rotate(180deg); transform: rotate(360deg);
} } }
25% { 75% {
transform: rotate(90deg); transform: rotate(270deg);
} }
 CHAPTER 4 ANIMATIONS 119

animation-direction Property
Another new property is the animation-direction property, which defines
whether an animation runs forward or in reverse on some or all of its cycles.
The animation-direction property takes one of four values:
◆ normal specifies that all iterations of the animation are played as specified.
◆ reverse specifies that all iterations of the animation are played in the
reverse direction as specified.

◆ alternate causes the cycles to alternate between normal and reverse

with normal for the first cycle and all odd iteration counts. Even counts
are reversed.

◆ alternate-reverse causes the cycles to alternate between normal and

reverse with reverse for the first cycle and all odd iteration counts. Even
counts are normal.
-webkit-animation-direction: normal;

animation-direction: normal;

-webkit-animation-direction: alternate-reverse;

animation-direction: alternate-reverse;

When the animation plays in reverse, the timing functions also run in reverse—
for example, ease-in runs as ease-out.
Until now, the sliding box you’ve been working with slides to the right and
then instantly returns to its initial location. The jump is more than a little jar-
ring. The alternate and alternate-reverse values can remove the jump.
Instead, the box continues to slide right and left until the animation stops.

Let’s go back to the sliding .box div you’ve used through most of this chap-
ter (Example 4.6).

1. Start by adding a div with a class of box to your HTML.

<div class="box"></div>
120 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

2. Give the .box div dimensions and a background color.

.box {

width: 200px;

height: 200px;

background-color: #393;
}

3. Add the animation-* properties to .box. Additions to the code are

highlighted.
.box {

-webkit-animation-name: slide;

animation-name: slide;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: 3;

animation-iteration-count: 3;

-webkit-animation-direction: reverse;
animation-direction: reverse;

Notice the reverse direction.

 CHAPTER 4 ANIMATIONS 121

4. Create the slide keyframe.

@-webkit-keyframes slide {

to {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);

transform: translate(600px, 0px);

@keyframes slide {

to {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);

transform: translate(600px, 0px);

5. Load your page.

First it jumps 600 pixels to the right (so fast that you might not see the .box
on the left before the jump), and then it slides back to its initial location
and repeats the sequence three times.
6. Change the value for the animation-direction in step 3 to alternate
(Example 4.7).
-webkit-animation-direction: alternate;

animation-direction: alternate;

7. Reload your page, and observe the difference (Figure 4.7).

Now the .box div slides back and forth between the initial and ending
states. This makes for a much smoother overall animation. Experiment with
the normal and alternate-reverse values.
122 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Figure 4.7
Animation direction

animation-play-state Property
By default, your animations run as soon as the animation-name property is
assigned. You can change that behavior with the animation-play-state
property, which defines whether an animation is running or paused.

-webkit-animation-play-state: running;

animation-play-state: running;

-webkit-animation-play-state: paused;

animation-play-state: paused;

The default value, as you would likely guess, is running. If you change the
value to paused, the animation stops where it is until the animation-play-
state is changed again to running. When paused, the animation displays
whatever state the animation was in at that moment. When the animation is
resumed, it restarts from the state it was paused in.
 CHAPTER 4 ANIMATIONS 123

Let’s make one addition to Example 4.7 (Example 4.8).

1. Add the animation-play-state property to the .box div from the pre-
vious example. Additions to the code are highlighted.
.box {

-webkit-animation-name: slide;

animation-name: slide;

-webkit-animation-duration: 5s;
animation-duration: 5s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: 3;

animation-iteration-count: 3;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-play-state: paused;
animation-play-state: paused;

2. Reload your page.

Unlike previous examples, this time the animation doesn’t run when the page
is finished loading. To run the animation, you need to change animation-
play-state to running and reload the page.

This isn’t particularly useful if you have to reload the page after changing
the animation-play-state property, but it becomes much more useful
when changing properties via JavaScript or some other trigger.

Let’s modify the example to add triggers.

124 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

3. Modify your HTML to include play and pause buttons.

<div class="container">

<div class="box" id="box"></div>

<button id="play">Play</button>

<button id="pause">Pause</button>

</div>

The buttons get ids so your JavaScript code has something to hook into.
Notice that the code adds an id of box to the .box div.

The buttons need some styling.

4. Add the following to your CSS:

button {
padding: 0.5em 1em;

border: 1px solid #999;

border-radius: 5%;

margin-top: 3em;

Nothing special. Just a little style to make your buttons look “buttony.” Now
let’s add some JavaScript so the buttons do something.

5. Add the following code in the head of your document between <script>
</script> tags.

<script>

var init = function() {

var box = document.getElementById('box');

var play = document.getElementById('play');

var pause = document.getElementById('pause');

 CHAPTER 4 ANIMATIONS 125

document.getElementById('play').addEventListener(
p 'click', function(){

box.style.webkitAnimationPlayState = "running";
box.style.animationPlayState = "running";

}, false);

document.getElementById('pause').addEventListener(
p 'click', function(){

box.style.webkitAnimationPlayState = "paused";
box.style.animationPlayState = "paused";

}, false);

};

window.addEventListener('DOMContentLoaded', init, false);

</script>

Hopefully, the script looks somewhat familiar. The last line of code listens
for the page to load and then calls the init function.

Inside the function, you first get hooks to each button and the .box div and
set them to appropriately named variables. Next you add event listeners to each
button, and if a button is clicked, you set the value of animationPlayState
to either running or paused, depending on which button was clicked.

6. Reload your page one more time.

You should see the new play and pause buttons. The green box sits in the
top-left corner until you click the Play button to start the animation. Once
the box begins moving, you can click the Pause button to stop the anima-
tion. Clicking Play starts the animation again from the point at which it
was stopped.

animation-delay Property
The animation-delay property defines when an animation starts. It works
the same way the transition-delay property works. Like transition-
delay, values are in units of time and can be positive, 0, or negative.
126 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

-webkit-animation-delay: 2s;

animation-delay: 2s;

-webkit-animation-delay: 0s;
animation-delay: 0s;

-webkit-animation-delay: -2s;

animation-delay: -2s;

A positive value delays the animation until some point in the future. A value
of 0 (the default) starts the animation instantly. A negative value appears to
start the animation in the past. It starts instantly, but at a point in the middle
of the animation. The delay works as an offset.
Let’s continue to build on Example 4.8.

1. Add an animation-delay to the .box div. Additions to the code are

highlighted (Example 4.9).
.box {

-webkit-animation-name: slide;

animation-name: slide;

-webkit-animation-duration: 5s;
animation-duration: 5s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: 3;

animation-iteration-count: 3;

-webkit-animation-direction: alternate;
animation-direction: alternate;
 CHAPTER 4 ANIMATIONS 127

-webkit-animation-play-state: running;

animation-play-state: running;

-webkit-animation-delay: 2s;
animation-delay: 2s;

2. Reload your page.

The animation does nothing for 2 seconds and then slides back and forth like
before (Figure 4.8). Try using some negative values, and observe the
difference.
Figure 4.8
Animation delay
128 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

animation-fill-mode Property
You probably had an idea what each animation-* property did before I told
you. Some were familiar after working through transitions, and the property
names give a pretty good clue about what the others do.

The animation-fill-mode property is probably not intuitive to you. You

might be thinking about background colors filling your element or something
like that. The animation-fill-mode property actually defines what values
are applied by an animation outside of its execution time.

By default, an animation affects property values only while it’s running. This
is why the example animations you’ve been working with often jump back to
the initial state when the animation stops. Whatever values are set in each key-
frame are the ones used for a property until either the next keyframe changes
it or the animation stops playing. When the animation stops, the CSS property
values are whatever values were set intrinsically on the element.
The animation-fill-mode property overrides this behavior. It takes four
keyword values.

animation-fill-mode: none | forwards | backwards | both

◆ none is the default, and it doesn’t apply any property values in the anima-
tion outside the animation’s execution.
◆ backwards applies the property values defined in the first keyframe that
starts the first iteration to the period defined by animation-delay. The
values come from either the 0% (from) or 100% (to) keyframes, depend-
ing on the value of the animation-direction property.

◆ forwards applies the property values after the animation stops. If the
animation-iteration-count value is greater than 0, the values applied
are those at the end of the last completed iteration. If the count value equals
0, the values applied are those that start the first iteration.

◆ both does what you might expect and applies both the forwards and
backwards values to the animation-fill-mode property.
 CHAPTER 4 ANIMATIONS 129

Once again let’s expand the example we’ve been working with.

1. Add an animation-fill-mode to the .box div. Additions to the code are

highlighted. Note that the iteration-count changes to 1 (Example
4.10).
.box {

-webkit-animation-name: slide;

animation-name: slide;

-webkit-animation-duration: 5s;

animation-duration: 5s;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: 1;

animation-iteration-count: 1;

-webkit-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-play-state: running;

animation-play-state: running;

-webkit-animation-delay: 2s;

animation-delay: 2s;

-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

}
130 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

2. Load the page in a browser.

As before, the green box slides to the right when the animation begins.
However, now when it stops it doesn’t jump back to its initial state. Setting
the animation-fill-mode to forwards allows the .box div to hold the
final state in the animation after the animation completes (Figure
4.9).

Figure 4.9
Animation fill mode

-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

Experiment with the different animation-fill-mode values to observe what

each does. Change some of the other animation-* property values in combi-
nation with the animation-fill-mode property as well.

For example, use either of the reverse values on the animation-direction

and then use forwards on the animation-fill-mode.
animation-direction: alternate-reverse;

animation-fill-mode: backwards;

Or add a 0% (or from) keyframe in the @keyframes rule so the .box begins
the animation in a different location.

0% {

-webkit-transform: translate(75px, 0px);

-ms-transform: translate(75px, 0px);
transform: translate(75px, 0px);

}
 CHAPTER 4 ANIMATIONS 131

Make sure there’s a positive animation-delay, and set animation-fill-

mode to backwards.

animation-fill-mode: backwards;

For both changes, observe where the .box div is located before and after the
animation as well as during the animation-delay.

animation Shorthand Property

You can also use the animation shorthand property to set everything at once.
You saw this in the first example in this chapter.

animation: animation-property animation-duration

p animation-timing-function animation-delay
p animation-iteration-count animation-direction
p animation-fill-mode animation-play-state;

If you replace each of the properties with a value, you get something like this: Note

animation: slide 2s ease 0.5s 2 reverse both running; he current animation

spec mentions a possible
To add multiple animations, you separate each definition with a comma like this: future addition. At
some point, a / notation
animation: slide 2s ease 0.5s 2 reverse both running, might be added to
p bounce 5s ease-in-out 0 3 alternate forwards paused; the shorthand. If that
happens, you’ll be able
to specify duration and
Note that the comma occurs between the full definition for each animation.
delay as 10s/2s, where
There are two definitions in this line of code, so a single comma between them the numerator (10s) is
is all you need. the duration and the
denominator (2s) is the
As with transitions, order is important. Just as with the transition shorthand, delay. his doesn’t work
the first time value is assigned to the animation-duration property, and the now, but is a future
second time value is assigned to the animation-delay property. possibility.

Animation Events
You learned in the last chapter that when a transition completes, it generates
a DOM event. Animations also fire events. They fire an event at the start and
end of an animation as well as the end of each iteration.
132 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Types of Animation Events

Transitions fire an event only when the transition ends. Animations can fire
any of three possible events:

◆ An animationstart event fires when the animation starts. If a positive

animation-delay has been set, the event fires when the delay ends. If the
delay is negative, the event fires immediately with an elapsedTime equal
to the absolute value of the delay.
◆ An animationend event fires when the animation completes. This event
is similar to the transitionend event.
◆ An animationiteration event fires at the end of each iteration of an
animation, except the last one when an animationend event fires instead.
This means animations with zero or one iteration won’t fire an animation-
iteration event.

For transitions the transitionend event offers three read-only values. Simi-
larly there are three read-only values you can access with animation events:
◆ animationName is the value of the animation-name property of the ani-
mation that fired the event.
◆ elapsedTime is the amount of time the animation has been running, in
seconds, when this transitionend event fires. This time excludes any time
the animation was paused. The elapsedTime for an animationstart
event is 0.0s.
◆ pseudoElement is the name (beginning with two colons) of the CSS pseudo-
element on which the animation runs or an empty string if the animation
runs directly on an element. At the moment only Firefox version 23 and
newer supports reading this value, but in practice I’ve yet to get it working.

Animations can have multiple properties animating at the same time. These
can be properties set on a single animation or on multiple animations. An
event is generated for each animation-name value and not for each individ-
ual property being animated.

As long as an animation has a valid @keyframes rule and a nonzero duration,

it generates events, even if the @keyframes rule is empty.
 CHAPTER 4 ANIMATIONS 133

Let’s try an example so we can experiment with these events and their associ-
ated values. You’ve been working with variations of the same example. Why
stop now? You’ve made the box slide to the right and most of the time back to
the left. Let’s add another @keyframes rule that generates a downward slide.
You’ll apply this new rule after the .box finishes the slide animation.

The animation will slide to the right, slide back to its initial position, and then
slide down and back up again (Example 4.11).

1. Add div with a class of box and an id of box to your HTML.

The class is used to style the div like you’ve been doing all along, and the
id is used to hook into the element via JavaScript. The class name and
id name don’t need to be the same. You just need to make sure to match
the names you give them in the appropriate place in the code.
<div class="box" id="box"></div>

2. Give the .box div dimensions and a background color so you can see it
on the page, and then add an animation using the animation shorthand.
.box {

width: 200px;

height: 200px;

background-color: #393;

-webkit-animation: slide 2s linear 0s 2 alternate

p both;

animation: slide 2s linear 0s 2 alternate

p both;

Before creating the @keyframes rule, take a look at the shorthand in this
code, and make sense of what it’s doing. It’s calling an @keyframes rule
named slide. Each animation cycle runs a total of 2 seconds. The timing
is linear so there is no acceleration. There’s no delay, and the animation
completes two cycles. It runs once normally and then runs in reverse. Ani-
mation elements hold their state both before and after the animation runs.
134 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

3. Create the @keyframes rule using translation to move the element 600
pixels to the right.
@-webkit-keyframes slide {

100% {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);

transform: translate(600px, 0px);

@keyframes slide {

100% {

-webkit-transform: translate(600px, 0px);

-ms-transform: translate(600px, 0px);

transform: translate(600px, 0px);

4. Load the page in a browser.

The familiar green .box slides to the right and then slides back left to its
starting point. This animation fires events. You’ll capture those events using
a little JavaScript. Don’t worry, it’s no more complicated than what you did
in the last chapter with transition events, and you’re free to copy the code.

What you’re going to do is listen for one of the animation events and when
it occurs, start a second animation. The .box is probably getting tired of
sliding across the page so a slidedown @keyframes rule seems in order.
 CHAPTER 4 ANIMATIONS 135

5. Create an @keyframes rule for a new slidedown animation. Add a trans-

lation transform, and make the .box move 300 pixels down the screen.
@-webkit-keyframes slidedown {

to {

-webkit-transform: translate(0px, 300px);

-ms-transform: translate(0px, 300px);

transform: translate(0px, 300px);

@keyframes slidedown {

to {

-webkit-transform: translate(0px, 300px);

-ms-transform: translate(0px, 300px);

transform: translate(0px, 300px);

You can reload your page if you’d like, but I’ll save the suspense. Nothing
changes. You’ve created a @keyframe rule, but it’s not attached to any ele-
ment yet. That’s where the events and JavaScript come in.

6. Add the following JavaScript between <script></script> tags in the

head of your document:

<script>

var init = function() {

var box = document.getElementById("box");
136 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

box.addEventListener("webkitAnimationStart",
p updateAnimation , false);

box.addEventListener("oTAnimationStart",
p updateAnimation , false);
box.addEventListener("animationstart",
p updateAnimation , false);

function updateAnimation (e) {

box.style.webkitAnimationName = "slidedown";

box.style.animationName = "slidedown";

};

window.addEventListener('DOMContentLoaded', init, false);

</script>

The JavaScript is a modified version of what you saw with transition events.
The last line of code, window.addEventListener('DOMContentLoaded',
init, false);, once again runs an init function after the page con-
tent loads.

In the init function, you first get the element with an id of box and assign
it to a variable named box. Next, you add an event listener (with and without
vendor prefixes) to the box to capture an animationstart event. When
the event is captured, it’s passed to an updateAnimation function. Finally
the updateAnimation function changes the animation-name value to
the slidedown animation created in step 5.

7. Reload your page, and observe what happens.

The second animation (slidedown) runs, but the first one (slide) doesn’t.
This happens because the JavaScript captures the event that fires at the start
of the animation and changes which animation is used before slide can run.

Let’s capture a different event (Example 4.12).

 CHAPTER 4 ANIMATIONS 137

8. Change your JavaScript to listen for animationiteration, and change its

vendor-prefixed variations. Changes in the code are highlighted.
<script>

var init = function() {

var box = document.getElementById("box");

box.addEventListener("webkitAnimationIteration",
p updateAnimation , false);

box.addEventListener("oTAnimationIteration",
p updateAnimation , false);

box.addEventListener("animationiteration",
p updateAnimation , false);

function updateAnimation (e) {

box.style.webkitAnimationName = "slidedown";

box.style.animationName = "slidedown";

};

window.addEventListener('DOMContentLoaded', init, false);

</script>

9. Reload your page.

The slide animation starts and completes a single cycle before it jumps
back to its initial state and begins and completes both iterations of the
slidedown animation.

This time you listened for the event that fires at the end of each iteration
of an animation. The slide animation completes one iteration, the
animationiteration event is fired, and your code starts the slidedown
animation. The slidedown animation completes because the JavaScript
code runs only a single time. No code is listening for the events that the
slidedown animation fires in this example.
138 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

10. Change your JavaScript code to listen for animationend, and change
its vendor-prefixed variations (Example 4.13). Changes in the code are
highlighted.
<script>

var init = function() {

var box = document.getElementById("box");

box.addEventListener("webkitAnimationEnd",
p updateAnimation , false);

box.addEventListener("oTAnimationEnd",
p updateAnimation , false);

box.addEventListener("animationend",
p updateAnimation , false);

function updateAnimation (e) {

box.style.webkitAnimationName = "slidedown";

box.style.animationName = "slidedown";

};

window.addEventListener('DOMContentLoaded', init, false);

</script>

11. Reload the page.

This time both animations start and complete. First slide moves the .box
to the right before returning. As soon as it completes, an animationend
event is fired. Your JavaScript hears the event and starts the slidedown
animation, which also completes.

Figure 4.10 summarizes listening for each of the three animation

events and starting the slidedown animation after the slide events
fire.
 CHAPTER 4 ANIMATIONS 139

Figure 4.10
Animation events summary

Let’s do one more thing: read the read-only values. You can access and read
them at each of the three fired events.

12. Change your JavaScript code to listen for the animationstart event,
and set an alert to display the animationName that fired the event and
the elapsedTime it’s been running. Changes in the code are highlighted.
<script>

var init = function() {

var box = document.getElementById("box");

box.addEventListener("webkitAnimationStart",
p updateAnimation , false);

box.addEventListener("oAnimationStart",
p updateAnimation , false);

box.addEventListener("animationstart",
p updateAnimation , false);
140 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

function updateAnimation (e) {

alert("The " + e.animationName + " animation has

p been running for " + e.elapsedTime + "s");

};

window.addEventListener('DOMContentLoaded', init, false);

</script>

13. Reload your page.

As soon as the page loads, the slide animation runs, and an alert pops up
with the message, “The slide animation has been running for 0s.”

Figure 4.11 shows the alerts that display when listening for the
animation- iteration event.

Figure 4.11
Animation event read-only
values

Experiment by changing which event is listened for. Change animationstart

to animationiteration, then to animationend (and their vendor-prefixed
variants), and observe the differences. When listening for the animationiteration
event, your alert should read “The slide animation has been running for 2s,” and
when listening for the animationend event it should read “The slide animation
has been running for 4s.”
 CHAPTER 4 ANIMATIONS 141

Transition or Animation
One of the questions you might be asking yourself is when you should use a
transition and when you should use an animation. You can create most of the
examples in this and the previous chapter using either transitions or anima-
tions. So which should you choose when you want to animate something?

Similarities
You can start to answer that question by thinking about the similarities and dif-
ferences of transitions and animations. One thing they both have in common
is their properties. About half the animation-* properties have a counterpart
transition-* property. The timing functions, for example, are the same, except
for using the word animation or transition to start the property name.

Both can listen for changes to CSS property values and interact with JavaScript
events. Triggering events like those in the following list can make changes in
CSS property values that start either animations or transitions:
◆ :hover
◆ :link
◆ :active
◆ :visited
◆ :focus
◆ :checked
◆ :disabled
You can also start transitions and animations through changes in media que-
ries or class changes via simple JavaScript that changes the appropriate prop-
erty values.
142 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Differences
Let’s switch gears and think about the differences. Although both transitions
and animations can run in response to a trigger, only animations can run auto-
matically on page load. Transitions require a trigger to run. If you need your
animation to run automatically, you have only one choice.
Transitions are limited to initial and final state keyframes. Animations can
build as many intermediate keyframes as necessary or desired. This gives you
more control over your animation and allows you to create more complex and
sophisticated animations. Transitions are for simple animations.
Transitions don’t change properties. You set values up front in the CSS intrin-
sic to the specific elements. Transitions define the change only between prop-
erty values and not the values themselves. Animations can change property
values inside each keyframe. The values don’t need to be declared outside the
animation either, making animation more dynamic.

Transitions can’t loop. They run once when triggered and then run in reverse
when the trigger is removed. Otherwise they don’t run. You can loop anima-
tions as many times as you want and set them to run in reverse or alternate
between forward and reverse. Once again CSS animations offer you more con-
trol than CSS transitions.

Once you start using JavaScript to further control your transitions and ani-
mations, it quickly becomes clear that transitions are easier to work with. It’s
more difficult making changes to the values inside keyframes than it is the
intrinsic values on elements.
As a general rule, you’ll write more code using CSS animations as opposed to
CSS transitions, assuming both are trying to do the same thing.

When you get down to it, animations are abstractions of transitions. States are
pulled out from the specific case to work in a more modular fashion. Tran-
sitions are a specific case of the more general animation. If you find yourself
using the same transition code over and over, you might decide to rewrite it
as an animation.
 CHAPTER 4 ANIMATIONS 143

Choosing Transitions or Animations

If what you want to create is a simple animation between two states, keep your
code simpler and lighter, or use JavaScript in the animation, then transitions
are probably a better choice.
If what you want to create is going to be something more complex with a need
for more than two states or if your animation needs to loop or run in either
direction and start itself, animations are your choice.

In general, choose CSS transitions for simple animation that require less con-
trol, but better integration with JavaScript. Choose CSS animations for more
complex and flexible animations that offer you greater control.
There’s one question in regard to transitions and animations you might still
be wondering about: Does one perform better than the other? To answer that
question, let’s look at performance.

Performance
The short answer is that you shouldn’t see any performance difference between
transitions and animations, assuming both are doing the same thing in the same
way. Performance has more to do with what properties are being changed as
opposed to whether those changes happen through transitions or animations.

To render webpages, a browser first calculates the CSS styles that apply to the
HTML elements. Then it lays out the page by working through the geometry
and position for each element. Next comes painting where pixels are filled in
before finally drawing everything to the screen on composite layers. Browsers
use two different execution threads to do all these things and render webpages:
the main thread and the compositor thread.
The main thread is responsible for laying out pages and painting elements. It
computes the CSS styles applied to HTML elements, and it runs JavaScript.
The compositor thread draws bitmaps to the screen via the graphic processing
unit (GPU). It determines which parts of the page are visible or will soon be
visible. It determines what’s likely to be scrolled to next and moves the parts
of the page when someone does scroll. Both threads communicate with each
other, sending and requesting information.
144 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

The main thread tends to be busier for longer periods of time, and while busy
it’s not responsive to input. The compositor thread, on the other hand, tries to
remain responsive because it has to be aware of scrolling.
Main thread responsibilities are more CPU intensive, while compositor respon-
sibilities look to the GPU more frequently. GPUs can draw the same bitmaps
over and over in different positions quickly. They can scale and rotate bitmaps
quickly as well.

To create more performant animations, you generally want to stay away from
layout and painting changes and instead make compositing changes. Com-
positing changes can be made on separate compositing layers, so the browser
doesn’t need to repaint or rework the layout of other layers.
TaBle 4.1 lists CSS properties that affect layout and painting.

It turns out that there are currently five things browsers can animate cheaply
in terms of performance: translation, scale, rotation, opacity, and some CSS
filters. The first three should have you thinking back to transforms. Anything
beyond animating these five types of properties probably won’t run as smooth.

Consider moving an element to a new location, which is something you’ve

done a few times throughout this book. You can use a transform to move the
element, or you can adjust properties like top and left. The former uses the
GPU, while the latter uses the CPU. You want to take advantage of the GPU
where possible and take advantage of the hardware acceleration it provides. If
you think back to the first example in this chapter, you moved an element by
adjusting its left value and then by applying a translation transform. The
approach using translation ran smoother, and this is why.

It won’t matter whether you use CSS transitions or CSS animations when it
comes to performance, but you should think about performance when creat-
ing either. Transforms, opacity, and some CSS filters don’t require layout or
painting changes and so are preferred properties for animating.
This doesn’t mean you shouldn’t animate other properties. You can still cre-
ate a smooth animation with other properties. Just realize that if you have the
choice, you should opt for changing a transform, opacity, or CSS filter instead
of another property.
 CHAPTER 4 ANIMATIONS 145

TaBle 4.1. CSS Properties

PROPERTIES THAT AFFECT LAYOUT PROPERTIES THAT AFFECT PAINTING
width color

height border-style

padding border-radius

margin visibility

display background

border-width text-decoration

border background-size

top background-image

position background-position

font-size background-repeat

float outline-color

text-align outline

overflow-y outline-style

font-weight outline-width

overflow-y box-shadow

left

right

font-family

line-height

vertical-align

clear

white-space

bottom

min-height
146 CSS A NIMATIO NS AND TR A NSITIO NS FOR THE MODERN WEB

Summary
In time, you can expect browsers to make more CSS properties quicker to
animate. For now, do what you can with what you have. You have enough
control over both transitions and animations to animate many CSS proper-
ties smoothly and create more realistic-looking animations, which brings us
to the next chapter.
298 INDEX

Index
Symbols realistic, 147–148, 295
resources on, 294–296
* (asterisk), 47
restraint in, 197, 198, 209
@keyframes rule
running and pausing, 122–125
defining and using, 101–104
running forward or in reverse, 119–122
naming with animation-name property, 104–
secondary action in, 195–196
105
slow in and slow out, 182
opening and closing sidebar navigation with,
smoothing, 72, 98–100
249–254
solid drawing in, 206–207
squash and stretch, 155–157
squash and stretch in, 149–158
staging for, 164–167
A starting, 100, 106
absolute positioning, 284 straight-ahead and pose-to-pose actions for, 168
accelerating/decelerating transitions, 68–78 subtle transitions in, 5–6
ease curves, 74 timing, 196–197
ease-in curves, 76 transitions vs., 57, 94, 141–145, 217, 294
ease-out curves, 77 trends in, 211, 289
linear curves, 75 types of, 6–7
actions uses for, 211
adding anticipation to, 159 using multiple, 100
follow-through and overlapping, 168–181 animation-* properties, 104–131
overlapping and secondary action, 195–196 adding to off-canvas sidebar navigation, 248–249
staging, 165 animation-delay, 125–127
straight-ahead and pose-to-pose, 168 animation-direction property, 119–122
triggering transitions with, 58 animation-fill-mode, 95, 128–131
all keyword, 62, 63 animation-iteration-count property, 114–
alternating animation directions, 19 118
animation, 93–146. See also animation-* properties; animation-name, 104–106
twelve principles of animation animation-play-state, 122–125
about, 93–94 animation-timing-function, 107–114
additional principles of, 208–209 animation-duration, 106–107
anticipation in, 158–164 shorthand animation property, 131
appeal in, 207–208 animationend event, 132, 139
arcs in, 182–195 animationiteration event, 132, 139
CSS positioning creating, 96–98 animationstart event, 132, 139
defining with @keyframes rule, 101–104 anticipation, 158–164
delaying, 125–127 appeal, 207–208
Disney’s 12 principles of, 148–149, 295–296 arcs, 182–195
ending, 105
events in, 131–140 B
exaggeration in, 197–206
backface-visibility() property, 43–51
firing events, 131
background color transitions
follow-through and overlapping action in, 168–
delaying, 79–81
181
duration of, 66–68
importance in web design, 3–5, 289
occurring when hovering, 60–61, 63–65
iteration counts for, 114–118
progressive, 60–61
JavaScript vs. CSS, 96
step functions for timing changes in, 69–71
keyframes for, 94
:before and :after pseudo-elements, 58, 62
looping, 114–118, 142, 143
body property, 212–213
practicing, 290
 INDEX 299

bounce animation rendering in 3-D, 41

adding arcs to, 182–195 rotating around parent’s div axis, 42
adding exaggeration to, 197–206 click events in CSS, 231
applying solid drawing principle to, 206–207 color. See also background color transitions
applying squash and stretch principle, 149–158 adding to background, 19–20
creating anticipation in, 158–164 navigation bar background, 216–217
follow-through and overlapping action for, 168– setting modal window, 228–229
181 containers
secondary actions and ball rotation in, 196 adjusting perspective origin of, 37–39
slow in and slow out in, 182 code for modal window, 226–227
staging and context for, 164–167 content switcher, 269–285
bounding box, 19–20 combining transitions on different properties,
box model 285
adding padding to, 20 event listener for, 273–275
CSS positioning to animate, 96–98 implementing switch statements for, 275–276
generating DOM events after transitions in, listening for page to complete loading, 273
84–87 setting up HTML document for, 269–270
inheritance of transform-origin property in, sliding content block while modifying opacity
18–19 and scale, 275–282
layouts in CSS animation, 11 styling window components of, 270–273
rotating, 14–16, 23 coordinate space
starting/reversing transitions of, 82–83 stacking contexts in, 30–31
box-sizing: border-box property, 47, 212–213 3-dimensional, 34
browsers. See also IE; Opera Mini 2-dimensional, 12
animation support in, 95–96, 146 CSS (cascading style sheets)
applying transform matrix in, 26–28 adding multiple transforms to elements, 29–30
CSS transforms and transitions supported by, animatable properties available for transitions,
7–9 89–91
deciding which to support, 287 browser support for, 9
preventing Webkit browsers from running non- choosing transitions or animations, 143
Webkit code, 257 click events in, 231
resources on, 292 CSS Shapes Module in future, 11
support and vendor prefixes for, 13, 55 differences in transitions and animations, 142
transition and animation performance in, overriding preserve-3d value in, 40
143–144 polyfills for unsupported, 7–9
transition support by, 58, 92 properties affecting layout and painting in,
transitioning CSS animatable properties in, 89 144, 145
buttons similarities in transitions and animations, 141
changing text for sidebar navigation, 256–258 transformations using, 7
modal window, 226–227 2-dimensional coordinate space for, 12
triggering animation play with, 123–125 updated lists of animatable properties, 91
usefulness of JavaScript with, 288
C using animations in JavaScript or, 96
visual formatting model for, 11–12
card flip CSSSandpaper polyfill, 13
adding to modal window, 234–235, 236, 239–240 cubic Bézier curves, 69, 72–78
backface-visibility() property for, 43–51 defining, 72–73
Cascading Style Sheets. See CSS ease curves, 74
character staging, 164 ease-in curves, 76
child elements ease-in-out curves, 78
controlling 2-D or 3-D rendering of, 39–42 ease-out curves, 77
creating new origin for, 18 keywords for, 73, 74–78
flattening, 39–42 linear curves, 75
300 INDEX

D off-canvas sidebar navigation, 242–268

squash and stretch, 150–158
decelerating transitions. See accelerating/decelerating
transitions
delaying F
animations, 125–127 Flash animation, 7
transition starts, 79–81 flat value for transform-style property, 39
depth cues, 4–5 follow-through, 168–181
detecting browser support, 95 forms, 227–228
Disney Animation (Johnston and Thomas), 148 functions
Disney, Walt, 148–149 cubic Bézier curves, 69, 72–78
Drawn to Life (Stanchfield and Hahn), 208 distinguishing 2-D and 3-D, 52
drop-down menu for navigation bar, 218–223 matrix(), 25–28
duration of transitions, 66–68 matrix3d(), 53–54
rotate(), 23, 52
E scale(), 22–23, 52
skew(), 24
easing
step, 69–71
ease curves, 74
3-dimensional, 52–54
ease-in curves, 76, 107–111
translate(), 21–22, 52
ease in/out animation principle, 182
2-dimensional transform, 21–28
ease-in-out curves, 78
using multiple transform, 29–30
ease-out curves, 77
effects. See also transforms; transitions
resources on, 296–297 H
elements. See also child elements; pseudo-elements Hahn, Don, 208
adding multiple transforms to, 29–30 hiding/showing
applying multiple transitions to, 62–63, 92 front card face, 46
delaying start of transitions, 79–81 previously defined @keyframes rule, 103
moving to different location, 21–22 submenu with opacity, 219–221
numeric values when making smaller, 23 hovering
scaling, 22–23 adding animation-name to elements in
setting transition duration for, 66–68 :hover state, 106
step functions for timing transitions in, 69–71 changing background color when, 60–61, 63–65
translating to different location, 21–22, 52 reversing transitions when removed, 91–93
ending animations, 105, 132, 139 HTML
environment for staging, 164–165 animation using dynamic, 6–7
event listeners code for modal windows, 225–226
adding for animation events, 137, 138, 139–140 drop-down menu code in, 218
adding JavaScript, 84 setting up content switcher document in,
setting up for content switcher, 273–275 269–270
events structuring off-canvas sidebar navigation,
buttons triggering animation, 123–125 243–246, 260–261
listening for animation, 136, 137–138, 139–140
resources on, 293, 294
transitions firing, 84, 92 I
types of animation, 131–140 icons for menu items, 247
exaggeration, 197–206 IE (Internet Explorer)
example code. See also bounce animation; and specific converting CSS transforms to filters in, 13
examples transitions using, 58
content switcher, 269–285 window.getComputedStyle workaround for,
how to use, 212–213 256
modal windows, 224–241 workarounds for inline-block method, 216
navigation bar, 213–223 workaround for preserve-3d, 42
 INDEX 301

inheritance for transform-origin property, 18–19 looping

inline-block method, 215–216 animations, 114–118, 142, 143
unavailable with transitions, 142
J
JavaScript M
adding event listeners, 84 matrix math, 25–26, 29
animation using, 7 matrix() function, 25–28
changing animation-name property for matrix3d() function, 53–54
off-canvas sidebar, 254–257 measurements in translate() function, 22
converting transforms to IE filters with, 13 mobile device navigation, 243
examples used in transform code, 14 modal windows, 224–241
finding libraries for animation, 95–96 adding card flip to, 234–235, 236
listening for animation events, 137, 138, 139–140 code for opening/closing overlay, 229–231
polyfills for unsupported CSS, 7–9 container and button code for, 226–227
transitions and ease of control in, 142 debate over, 224
usefulness of, 288 form labels for, 227–228
using animations in CSS or, 96 HTML code for, 225–226
Johnston, Ollie, 148 illustrated, 224–225
jQuery, 95 moving offscreen, 232–234
scaling to final size, 236–237
K setting color and opacity for, 228–229
shrinking, 237–239
keyframes. See also @keyframes rule using multiple transitional effects in, 239–240
animation, 94 motion. See animation
applying animation-timing-function moving elements to different location, 21–22
between, 107 ms vendor prefix, 5, 13
creating anticipation with, 158–164 multiple animations, 100
defined, 101
defining with @keyframes rule, 101–104
overriding timing functions in, 111, 113, 114 N
placement of transitions and animations in, 142 naming transform property, 16
resetting property values in, 100 navigation. See navigation bar; off-canvas sidebar
setting up timing with, 197 navigation
keywords navigation bar, 213–223
all, 62 drop-down menu for, 218–223
animation-fill-mode, 128 illustrated, 213
Bézier curve, 73, 74–78 links for, 214–216
perspective-origin, 37 selecting list items from, 215–216
transform-origin, 17 setting background color for, 216–217
setting up horizontal elements for, 215
L nested transforms, 28
numbers
layers of design needs, 2–3, 288 about matrices, 25–26
laying out pages, 143–145 values for making elements smaller, 23
length values in perspective property, 34
libraries for JavaScript animation, 95–96
linear curves, 75 O
links for navigation bar, 214–217 objects
list items applying principle of solid drawing to, 206–207
adding for drop-down menu, 218 arcs and motion of, 182–183
displaying horizontally, 215 rotating around axis, 23
selecting, 215–216 setting origin of transformed, 16–20
302 INDEX

objects (continued) perspective property

skewing, 24 about, 55
slow in and slow out of, 182 setting up 3-dimensional look with, 34–37
squashing and stretching, 149–158 polyfills
staging characters and, 164 applying transitions in IE with, 58
visibility of back side of transformed, 43–51 resources on, 292
off-canvas sidebar navigation, 242–268 Transformie and CSSSandpaper, 13
adding animation-* properties to, 248–249 pose-to-pose action, 168
@keyframes rules for opening/closing, 249–254 positioning
HTML code for layout, 243–244 animating box model with CSS, 96–98
icons for menu items, 247 relative, 285
JavaScript changing animation-name property, using absolute, 284
254–257 practicing animation principles, 290
layout for four divs, 244–247 preserve value for transform-style property,
open and closed, 242 39, 40, 42
preventing Webkit browsers from running non- progressive enhancement
Webkit code, 257 designing with, 243, 288–289
second version of, 259–268 suggestions for sidebar navigation, 259
suggested enhancements for, 259 properties
opacity affecting layout and painting, 144, 145
changing as content block slides outside window, applying values to completed animations, 128
280 CSS animatable, 89–91
combining with scaling effect, 277–279 effect of transitions and animations on, 142
hiding/showing elements used by browsers, 229 resources on animatable, 294
hiding/showing submenu with, 219–221 setting different values for multiple animation, 100
setting modal window, 228–229, 231–232 setting values on transition-*, 92
transition for changing, 231–232 3-dimensional transform, 34–52, 55
opening/closing modal window overlay, 229–231 2-dimensional transform, 16–20, 55
Opera Mini using asterisk in, 47
oTransitionEnd event, 84 pseudo-elements
transforms with, 13 :before and :after, 58, 62
transitions using, 58 support for, 95
overlapping action, 181, 195–196
overriding
@keyframes rule, 103
R
preserve-3d value, 40 realistic animation, 147–148, 295
timing functions in keyframes, 111, 113, 114 relative positioning, 285
rendering child element in 3-D, 41
resizing. See scaling
P resources
padding for bounding box, 20 animation, 294–295
painting elements, 143–145 browser support, 292
parent elements detecting browser support, 95
flattening child element on, 39–42 effects, 296–297
rendering child element in 3-D, 41 performance, 294–295
rotating child around parent’s div axis, 42 polyfills, 292
performance realistic animation, 295–296
resources on, 294–295 transform matrix, 293
of transitions and animations, 143–144, 217 transforms, 292
perspective function, 53 transitions, 293–294
perspective-origin property, 37–39 transitions vs. animations, 294–295
twelve principles of animation, 295–296
updated lists of animatable properties, 91
 INDEX 303

user interface design, 296 T

visual formatting model, 293
:target hack, 231
restraint in animation, 197, 198, 209
Thomas, Frank, 148
reversing
3-D CSS transforms, 33–52
animations, 119–122
about, 33–34
transitions, 82–83
backface-visibility() property for, 43–51
transitions when hovering stopped, 91–93
browser support for, 7, 8
rotate() function, 23, 52
coordinate space for, 34
rotations
distinguishing functions in 2-D and, 52
around origin point, 18–19
functions for, 52–54
bounding box, 19–20
IE support for, 13
2-D box, 14–16, 23
perspective-origin property for, 37–39
using 3-dimensional perspective, 36
perspective property for, 34–37
running and pausing animations, 122–125
properties for, 34–52, 55
rotations in 2-D vs., 36–37
S transform rendering model for, 30–33
scale() function, 22–23, 52 timing
scaling animations, 107–114
modal window to final size, 236–237, 239–240 applying ease-in-out, 187
shrinking modal windows, 237–240 overlapping actions with different, 181, 195–196
transform for squash and stretch animation, playing in reverse, 119–122
153–158 principle of animation, 196–197
using scale() function, 22–23 resources on, 293
secondary action, 195–196 secondary actions, 195–196
shrinking modal windows, 237–240 step functions in background color changes, 69–
skeuomorphic realism, 211, 289 71
skewing objects, 24 transitions, 68–78
sliding transform matrices
content block while changing opacity, 280 math for, 25–26
modal window as it becomes opaque, 232–234, matrix() function for, 25–28
239–240 matrix3d() functions for, 53–54
modifying content block opacity and scale while, order in, 29
275–282 resources on, 293
off-canvas sidebar on/off canvas, 259–268 transform-origin property
smoothing animation for, 98–100 inheritance and, 18–19
submenu offscreen, 221–222 perspective-origin property vs., 37, 38
using CSS positioning in, 96–98 setting values for, 16–20
smoothing animation, 98–100 transform property
solid drawing, 206–207 about, 14, 55
squash and stretch, 149–158 naming, 16
stacking contexts, 30–31 using perspective function with, 53
staging, 164–167 transform-style property, 39–42
Stanchfield, Walt, 208 Transformie polyfill, 13
starting animations, 100, 106 transforms, 11–55. See also 3-D CSS transforms;
states, animation, 142 transform matrices; 2-D CSS transforms
step functions, 69–71 about CSS visual formatting model, 11–12
straight-ahead action, 168 adding multiple transforms to elements, 29–30
syntax browser support and vendor prefixes for, 13, 55
adding values in step functions, 69 converting to IE filters with JavaScript, 13
transitioning multiple properties, 62, 81 creating 2-D rotation, 14–16
using asterisk in properties, 47 functions for 2-D, 21–28
writing multiple transforms, 29–30 nested, 28
resources on, 292
304 INDEX

transforms (continued) staging, 164–167

setting fixed point for object, 16–20 straight-ahead and pose-to-pose actions, 168
transform rendering model for 2- and 3-D, timing, 196–197
30–33 2-D CSS transforms, 14–33
used during arcing of bouncing ball, 194 browser support for, 7, 8
working with, 55–56 coordinate space for, 12
transition-* properties distinguishing functions in 3-D and, 52
checking mismatched vendor prefixes in, 68 functions for, 21–28
setting values on, 92 IE support for, 13
transition-delay property, 79–81 properties for, 16–20, 55
transition-duration property, 66–68 rotating box, 14–16
transition-property, 62–65 3-D rotations vs., 36–37
transition-timing-function, 68–78 transform rendering model for, 30–33
using shorthand transition property, 81
transitionend event values, 84
transitions, 57–92. See also background color
U
transitions; transition-* properties underscore hack, 216
about, 5–6, 57–58, 92 user interface design
accelerating and decelerating, 68–78 animation as guide in, 289
adding multiple transitions to elements, 62–63, animation in, 208, 209, 289
81, 92 resources on, 296
adding to background color, 217 user expectations of forward and reverse
animatable property resources, 294 transitions, 83
animations vs., 57, 94, 141–145, 217, 294
browser support for, 58, 92 V
CSS animatable properties for, 89–91
values
DOM events generated by, 84–88
adding for step functions, 69
example code for, 59–62, 63–65
applying to completed animations, 128
resources on, 293–294
overriding preserve-3d, 40
shorthand method for, 81
resetting inside keyframes, 100
starting and reversing, 82–83
setting for transition-* properties, 92
transition event resources, 293
using different values for multiple animation
types of animation for, 6–7
properties, 100
using with drop-down menu, 218–223
visibility, 3-D backface, 43–51
translate() function, 21–22, 52
visual formatting model, resources on, 293
trends in animation, 211, 289
triggering animation play with buttons, 123–125
twelve principles of animation W
about, 209–210 webkit vendor prefix
additional principles, 208–209 browser support and, 13, 15
anticipation, 158–164 checking mismatches in transition-*
appeal, 207–208 properties, 68
arcs, 182–195 transitions and, 58
exaggeration, 197–206 webkitTransitionEnd event, 84
follow-through and overlapping action, 168–181 website design
overview, 148–149 about transitions, 5–6
practicing animation principles, 290 animation in, 3–5, 208, 209, 289
resources on, 295–296 choosing browsers to support, 287
secondary action, 195–196 hierarchy of needs in, 2–3, 288
slow in and slow out, 182 progressive enhancement in, 243, 259, 288–289
solid drawing, 206–207 trends in, 211, 289
squash and stretch, 149–158