﻿ Creating Web Animations: Bringing Your UIs to Life | Kirupa Chinnathambi | download
メイン Creating Web Animations: Bringing Your UIs to Life

Creating Web Animations: Bringing Your UIs to Life

Thanks to faster browsers, better web standards support, and more powerful devices, the web now defines the next generation of user interfaces that are fun, practical, fluid, and memorable. The key? Animation. But learning how to create animations is hard, and existing learning material doesn’t explain the context of the UI problem that animations are trying to solve. That’s where this book comes in.

You'll gain a solid technical understanding of how to create awesome animations using CSS and learn how to implement common UI patterns, using practical examples that rely on animations to solve a core problem. Frontend web developers and designers will not only learn important technical details, but also how to apply them to solve real-world problems.

  • Create animations found in common user interface implementations, such as bounce after scrolling, expanding search boxes, and content sliders
  • Learn the technical details of working with CSS animations and transitions
  • Use CSS transforms to very animate an element’s position, scale, and orientation
  • Understand the importance of easing
Categories: Computers\\Web-design
発行年: 2017
エディション: 1
出版社: O’Reilly Media
言語: english
ページ数: 210
ISBN 10: 1491957514
ISBN 13: 9781491957516
File: PDF, 12.86 MB

You may be interested in


Most frequently terms


MOS 2016 Study Guide for Microsoft Excel

発行年: 2016
言語: english
File: AZW3 , 7.59 MB

Inside Microsoft Dynamics AX 2012 R3

発行年: 2014
言語: english
File: AZW3 , 31.92 MB
Creating Web

Kirupa Chinnathambi

Creating Web Animations

Bringing Your UIs to Life

Kirupa Chinnathambi


Boston Farnham Sebastopol


Creating Web Animations
by Kirupa Chinnathambi
Copyright © 2017 Kirupa Chinnathambi. All rights reserved.
Printed in the United States of America.
Online editions are also available for most titles (http://oreilly.com/safari). For more

Editor: Meg Foley
Production Editor: Kristen Brown
Copyeditor: Rachel Monaghan
Proofreader: Molly Ives Brower
April 2017:

Indexer: Angela Howard
Interior Designer: David Futato
Cover Designer: Karen Montgomery
Illustrator: Rebecca Demarest

First Edition

Revision History for the First Edition
2017-03-15: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491957516 for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Creating Web Ani‐
mations, the cover image, and related trade dress are trademarks of O’Reilly Media,
the author disclaim all responsibility for errors or omissions, including without limi‐
tation responsibility for damages resulting from the use of or reliance on this work.
open source licenses or the intellectual property rights of others, it is your responsi‐
bility to ensure that your use thereof complies with such licenses and/or rights.


Table of Contents


Part I.

The Basics

1. Introduction to Web Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
What Is an Animation?


2. Introduction to CSS Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Creating a Simple Animation
What Just Happened
The Longhand Version


3. Introduction to CSS Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Creating a Simple Transition
What Just Happened
The Longhand Version


4. Working with CSS Timing Functions. . . . . . . . . . . . . . . . . . . . . . . . . . 29
What Is a Timing Function?
Timing Functions in CSS


5. Ensuring Your Animations Run Really Smoothly. . . . . . . . . . . . . . . 43
What Is a Smooth Animation?


Creating Responsive 60 fps Animations


6. Transitions, Animations, and JavaScript. . . . . . . . . . . . . . . . . . . . . . 53
It’s Just Property Changes
A Tale of Two Styling Approaches
Animating with requestAnimationFrame


7. CSS Animations Versus CSS Transitions. . . . . . . . . . . . . . . . . . . . . . . 65


Part II. Learning from Examples
The Starting Point
Animated Underline
Simple Background Color Change
Cooler Background Color Change


9. Simple Text Fade and Scale Animation. . . . . . . . . . . . . . . . . . . . . . . 85
The Example


10. Creating a Smooth Sliding Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
How the Sliding Menu Works
Creating the Sliding Menu


The Basic Idea
Building It All Out


12. The iOS Icon Wobble/Jiggle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
The Full HTML and CSS
Deconstructing This Effect



Table of Contents


Looking at the CSS
Faking Randomness


Overview of How the Parallax Effect Works
Getting Started


14. Sprite Sheet Animations Using Only CSS. . . . . . . . . . . . . . . . . . . . . 153
Creating the Sprite Sheet


15. Creating a Sweet Content Slider. . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Overview of How It Works
The Content
Clipping the Content
The Navigation Links
Making the Content Actually Slide
Understanding the Code (and More!)


Until Next Time



Table of Contents




Animations are everywhere. Today, anything you do on a device
with a screen is just one click, tap, or keystroke away from springing
to life. As it turns out, animations are no longer a luxury or some‐
thing to keep under wraps. Instead, they make up a large part of
your experience using applications in your browser, on your phone,
or on any other “smart” device. It’s no surprise why. Users love ani‐
mations. When done right, animations can make your applications
easier to navigate, make your content more presentable, and even
help your creations feel more alive and fun. Sometimes, animations
look cool and you just gotta throw them in. These are all good
What’s the catch? Well, for all the great things animations have
going for them, creating them is hard. On the web, the way you
think about animations is different. The way you create them is also
different…really different. The challenges that you once painfully
overcame in older technologies like Flash are back in new and inter‐
esting ways. Fortunately, this is all part of learning something new.
All you need is the right guide to help you along the way.


That guide is going to be me:

Hi. My name is Kirupa, and I love animation. Ever since my parents
bought me a computer in the early 1990s, I’ve been trying to get
things to move on the screen and tell everybody how awesome it is.
Nothing much has changed in my world since then…except for this
This book is all about teaching you how to create great animations
for the web. It starts off with the very basics and gradually ratchets
up the heat as you learn how to create more involved, more lifelike,
and more complex animations. By the time you reach the last page,
you will have learned a lot about how to create animations in HTML,
CSS, and JavaScript using the one-two punch of web standards and
best practices. If I did my job well, hopefully you had a bunch of fun
along the way and laughed out loud a few times. More than likely,
you will also have cringed a lot…kind of like you did after reading
“one-two punch of web standards and best practices.”

Know Your Basic HTML, CSS, and JavaScript
To get the most out of this book, you should be familiar with the
basics of HTML, CSS, and JavaScript. By no means do I expect you
to be an expert in any of these languages, but when you see some
HTML or CSS or JavaScript, you should be able to understand what
is going on with only a little handholding. This is the equivalent of

| Preface

knowing enough of a local language to get around town by reading
the street signs.
If this doesn’t describe you, shuffle (or push/click/flick/scroll)
through this book and see how you feel after skimming through
some of the pages. If most of what you see seems like unintelligible
gibberish, then I encourage you to take a detour and learn the basics
of working in HTML first. There are a lot of great books and online
tutorials out there (hint: especially on https://www.kirupa.com), so
you should be up and running very quickly. After that, you will
probably have a much better time with this book.

About Authoring Tools
This entire book is written with no expectation that you use a fancy
HTML authoring tool. A basic editor that allows you to see HTML,
CSS, and JavaScript is all you need. If all you have is a text editor like
Notepad, you’ll be fine as well. This book is old school. It’s all about
manual labor and having you get your hands dirty when creating
You may be wondering why a book aimed at teaching animation
would avoid using animation tools. There are several reasons. The
main one is that tools abstract away important details. They often
make choices for you that you may not fully understand. When
you’re learning something new and complex such as web-based ani‐
mations, I strongly believe that you need to know every single detail
about what you are doing. That can only happen if you are fully
involved in every part of what you are creating.
With all that said, once you’ve learned all about animations, their
subtleties, and gotchas, take some time and look at the great tools
that are out there. Well-designed tools help you to be significantly
more productive than you ever will be defining animations by hand,
and being productive is yet another good thing!™




Browser Support
Everything you learn in this book is designed to
work on what all the cool people call a “modern”
browser. That’s just a fancy way of saying that if
you are running a semirecent version of
Chrome, Internet Explorer 11, Edge, Firefox, or
Safari, you should be good to go. Also, before
you ask, everything you see here will work beau‐
tifully on mobile devices like your iPhones,
iPads, and Android-based gizmos!

Using the Code Examples
for download at https://github.com/kirupa/kirupa/tree/master/creat‐
You will be seeing a fair amount of code in this book. Since I get a
lot of questions regarding how you can use this code, the general
gist is this: for most “normal” cases, you can do whatever you want
with the code without contacting me or O’Reilly. That’s a bit broad, so
the following examples should help you out.
Situations where you don’t need to ask for permission:
• Using the code from this book in your personal or commercial
• Taking the code, modifying it, and sharing it with others
• Answering a question by using example code
• Printing out some code snippets and hanging them on your wall
as an art installation
Situations where you need to ask for permission:
• Publishing a significant amount of this book’s content and code
• Selling or distributing a CD-ROM (…or a VHS recording :P) of
the examples you see
• Incorporating a significant amount of example code from this
book into your product’s documentation
If you feel your use of code examples falls outside fair use or the per‐
mission given above, feel free to contact us at permis‐




O’Reilly Safari
Safari (formerly Safari Books Online) is a
membership-based training and reference
platform for enterprise, government, educa‐
tors, and individuals.
Members have access to thousands of books, training videos, Learn‐
ing Paths, interactive tutorials, and curated playlists from over 250
publishers, including O’Reilly Media, Harvard Business Review,
Prentice Hall Professional, Addison-Wesley Professional, Microsoft
Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press,
McGraw-Hill, Jones & Bartlett, and Course Technology, among oth‐
For more information, please visit http://oreilly.com/safari.

Getting Help/Contacting the Author
The last (and most important) thing to know before we get started is
what to do when you get stuck or just need some assistance. The
fastest and most effective way for getting help is to post on the
forums at http://forum.kirupa.com. I or any of the many other
friendly posters will help you out.
For any nontechnical assistance, you can contact me at kirupa@kir‐
upa.com, tweet to @kirupa, or message me on Facebook. I love hear‐
ing from readers like you, and I make it a point to personally
respond to every message I receive.

Contacting O’Reilly
If you’d like to contact the publisher, then use the following details:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
707-829-0515 (international or local)




707-829-0104 (fax)
and any additional information. You can access this page at http://
To comment or ask technical questions about this book, send email
to bookquestions@oreilly.com.
For more information about our books, courses, conferences, and
news, see our website at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia

Before we move on to the main part of the book, there are bunch of
people that I’d like to thank for helping make this book a reality:
First, I’d like to thank Meena—my awesome wife who encouraged
me to contact O’Reilly in the first place, helped get the ball rolling
for the book you see right now, and patiently tolerated my antics (I
am a writer, after all!) during the course of this book’s writing.
Next, I’d like to thank my parents for always encouraging me to aim‐
lessly wander and enjoy free time to do what I liked—such as spend‐
ing a large amount of time on the computer trying to make pixels
move around the screen. I wouldn’t be half the rugged indoorsman/
scholar/warrior I am today without them both.
On the publishing side, writing the words you see here is the easy
part. Getting the book into your hands is an amazingly complex
process. The more I learn about all the moving pieces involved, the
more impressed I am at all the individuals who work tirelessly
behind the scenes to keep this amazing machinery running. To
everyone at O’Reilly who made this possible, thank you! There is one
person I would like to explicitly call out: I’d like to thank Meg
Foley for replying to my original email asking if I could write a book
on web animations, patiently walking me through the publishing
process, and working with me throughout to help make the book
the best it can be. Next, I would like to thank Rachel Monaghan and
Kristen Brown for turning the original draft of this book into a form



of English that humans can easily understand. If the content in this
book makes sense, a large amount of credit should be given to
Rachel and Kristen for helping make that happen!
Lastly, the technical content of this book has been reviewed in great
detail by my long-time friend and online collaborator, Trevor
McCauley (aka senocular). Words have not been invented (in any
language…as far as I know) to express how grateful I am for his
attention to detail and ability to highlight when I could explain
something in a better, more clear way.
And with that…let’s get started!





The Basics

Before you can create the totally awesome, cool, and useful anima‐
tions that you want to create, we need to start at the beginning and
cover the basics. We need to get a good feel for the building blocks
you have at your disposal, not only for creating animations, but for
creating animations that run really well. That sounds complicated,
but as you will find out shortly, it’s all pretty straightforward…for
the most part. :P
In the following chapters, we are going to start at the very beginning
and quickly ramp up to the important things you will need to learn
and be aware of. That will set you up nicely for the rest of the book
where we start applying everything we learned toward creating the
animations that bring our UIs to life.


Introduction to Web Animations

While we think of animation as a recent creation brought about by
film and computers, people have been fiddling with ways to com‐
municate motion for a really really long time (Figure 1-1).

Figure 1-1. A sequence of pictures from 3000 BC (Wikipedia)
Those ways have ranged from cave paintings and elaborate mechan‐
ical devices to more familiar, contemporary solutions, such as what
you see on television, computers, and smartphones (Figure 1-2).


Figure 1-2. A really small sampling of apps that are lively and full of
No longer are animations primarily in the domain of games, intros,
cartoons, banner ads…or even cave paintings! Animations are
deeply ingrained in today’s technology, and they make up a large
part of your applications’ overall user experience. They can make
your applications easier to navigate. They make your content more
presentable. They can help your creations feel more alive and fun.
Who doesn’t want more of that?
That’s enough background for now. You aren’t here to get a history
lesson or be convinced of why animations are useful. You probably
already know about their importance. What you want to know is
how to actually implement animations, and you have come to the
right place. In this chapter and subsequent ones, you will learn how
to work with animations in HTML. In a short time, you will become
an animation expert…or at least be good enough to play one on TV.



Chapter 1: Introduction to Web Animations

What Is an Animation?
Before we proceed further down the bright, lava-filled pit where you
learn how to create animations, let’s take a step back and figure out
what an animation is. Let’s start with a definition. An animation is
nothing more than a visualization of change—a change that occurs
over a period of time.
Let’s look at that definition in more detail.

The Start and End States
If visualizing change is an important part of an animation, we need
to create some reference points so that we can compare what has
changed. Let’s call these reference points the start state and
the end state. To better explain what is going on, let’s come up with
an easy-to-understand example as well.
Let’s say our start state looks like Figure 1-3.

Figure 1-3. In the beginning, there was a small blue circle

What Is an Animation?



You start off with a small blue circle located to the left of the screen.
At the end state, your blue circle now looks sorta kinda like
Figure 1-4.

Figure 1-4. The circle moves right and grows larger
Based just on the information you have about what our blue circle
looks like in the start and end states, what can you tell is different?
One change is the position. Our blue circle starts off on the left side
of the screen. It ends up on the right side. Another change is the
size. Our circle goes from being small to being much larger.
How do we make an animation out of this? If we were to just play
the start and end states repeatedly, what you would see is a circle
that just bounces from left to right very awkwardly. That is pretty
turrible. Just turrible. What we need is a way to smooth things out
between the start and end states. What we need is a healthy dose
of interpolation.

Right now, what we have are two discrete states in time: the start
state and the end state. If you were to play this back, it wouldn’t be
an animation. In order to make an animation out of what we have,


Chapter 1: Introduction to Web Animations

we need a smooth transition that creates all the intermediate states.
The process of creating these intermediate states is known as inter‐
This interpolation, which occurs over a period of time that you spec‐
ify, would look similar to Figure 1-5.

Figure 1-5. Behold…an animation!
You may be wondering who specifies the interpolated states. The
answer, which is probably good news, is that your browser or HTML
rendering engine will take care of the messy details. All you need to
specify is the start state, the end state, and the duration over which
the transition between the two states needs to occur. Once you have
those three things, you have an animation!
Later you’ll see how adding some other ingredients into the pot,
such as timing functions (aka easing functions), can alter how the
interpolation works. For now, though, just revel in this simple
explanation of what makes up an animation, put on your best party
clothes, and get ready to meet the three flavors of animation that
you will end up using.

What Is an Animation?



Animations on the Web
On the web, there isn’t just a single animation implementation (hey,
that sorta rhymes!) that you can use. You actually have three flavors
of animation to choose from, and each one is specialized for certain
kinds of tasks. Let’s take a quick look at all three and see how they
relate to the animation definition you saw in the previous section.

CSS animations (aka keyframe animations)
CSS animations are like traditional animations on some sort of
performance-enhancing substance that makes them more awesome.
With these kinds of animations, you can define not only the begin‐
ning and the end state but also any intermediate states, lovingly
known as keyframes (see Figure 1-6).

Figure 1-6. How an animation made up of keyframes might look
These intermediate states, if you choose to use them, give you
greater control over the thing you are animating. In Figure 1-6, the
blue circle isn’t simply sliding to the right and getting larger. The
individual keyframes adjust the circle’s size and vertical position in
ways that you wouldn’t see if you simply interpolated between the
start and end states.
Remember, even though you are specifying the intermediate states,
your browser will still interpolate what it can between each state.
Think of a keyframe animation as many little animations daisychained together.



Chapter 1: Introduction to Web Animations

CSS transitions
Transitions make up a class of animations where you only define the
start state, end state, and duration. The rest, such as interpolating
between the two states, is taken care of automatically for you (see
Figure 1-7).

Figure 1-7. Transitions only need a start and end state to do their thing
While transitions seem like a watered-down, simplified keyframe
animation, don’t let that trick you. They are extremely powerful and
probably the type of animation implementation you’ll use the most.

Scripted/JavaScript animations
If you want full control over what your animation does right down
to how it interpolates between states, you can use JavaScript (see
Figure 1-8).

What Is an Animation?



Figure 1-8. When you use JavaScript, you have a lot of freedom in
defining how your animation works
There are a lot of cool things you can do when you opt out of the
interpolation the browser does for you, but we won’t be spending
too much time in this area. Scripted animations have their place in
games and visualizations, but covering those areas fully goes beyond
the UI focus of this book.

To quickly recap, an animation is nothing more than a visualization
of something changing over a period of time. In HTML, you have
not one, not two, but three different ways of bringing animations to
life: CSS animations, CSS transitions, and scripted animations (cre‐
ated in JavaScript). This book will primarily stay in the CSS-based
world, and the following chapters will start you off right…I hope!



Chapter 1: Introduction to Web Animations


Introduction to CSS Animations

When creating animations on the web, you can’t really go far
without running into CSS animations. What CSS animations do is
pretty simple. They allow you to animate CSS properties by specify‐
ing what you want those properties to do at various points in time.
These “points in time” are known as keyframes. If you’ve used ani‐
mation tools in the past, the word “keyframes” should sound famil‐
iar to you. The keyframes you define in CSS as part of making your
CSS animations work are the equivalent of the keyframes you would
have visually defined in Flash/Animate, After Effects, or some other
animation tool:

If you’ve never used animation tools in the past, don’t worry. You
won’t be missing out on much. We’ll be doing all of our animating
manually (like an animal!) and learning what is going on at each


step. By the end of this chapter, you’ll have learned enough to create
an animation made up of a smiling hexagon that bobs up and down.
Our hexagon will start off at the top:

It will slide to the bottom:

And at the end, our hexagon will slide back to the top:



Chapter 2: Introduction to CSS Animations

Along the way, we’ll cover the animation property, the @key
frames rule, and a handful of other topics that will set you up for
cooler and more advanced techniques using CSS animations in the

Creating a Simple Animation
The easiest (and most fun!) way to learn about CSS animations is to
just get your hands dirty with using them. Go ahead and create a
new HTML document and add the following HTML and CSS to it:
<!DOCTYPE html>
<title>Intro to CSS Animations</title>
body {
padding: 50px;
#container {
padding: 20px;
width: 100%;
height: 250px;
background-color: #EEE;
text-align: center;

Creating a Simple Animation



<div id="container">
<img id="hexagon"

Take a moment to look at what you just added. As web pages go,
there isn’t anything too complex or crazy going on here. The main
thing to note is that we have an image element, and it has
an id value of hexagon:
<div id="container">
<img id="hexagon"

We’ll be coming back to this element in a little bit, so don’t forget
about it!
Now, before we move on to the next step, go ahead and preview this
page in your browser. If everything worked right, you will see a
happy hexagon shape…standing boringly still:

Let’s fix the boredom by animating our hexagon shape. To do this,
we are going to create a CSS animation. To create a CSS animation,
you will need to complete two steps:



Chapter 2: Introduction to CSS Animations

1. Set the animation property.
2. Define the keyframes that specify exactly how and when CSS
properties get animated.
We’ll tackle these steps one at a time. First, we’ll deal with our anima
tion property. In your style block where your style rules currently
live, add the #hexagon style rule below your #container style rule:
#hexagon {
animation: bobble 2s infinite;

The details of what is going on inside this style rule aren’t important
at the moment; we’ll get acquainted with them later. For now, let’s go
to our next step and specify what our animation does by adding the
keyframes. Add the following @keyframes style rule just below
where your #hexagon style rule lives:
@keyframes bobble {
0% {
transform: translateY(10px);
50% {
transform: translateY(40px);
100% {
transform: translateY(10px);

Once you’ve added this style rule, preview your page again. You
should see your happy hexagon shape bobbing around happily as if
it hasn’t a care in the world. Awesome!

What Just Happened
You just defined a CSS animation that caused your hexagon shape to
bobble around. In our rush to get the example working, though, we
didn’t stop to examine what exactly was going on at each step. We
just ran screaming through it. So, let’s take a few moments to revisit
what we just did and learn more about why we did it.
The first thing we will look at is the animation property itself:
animation: bobble 2s infinite;

What Just Happened



The animation property is responsible for setting your animation
up. In the shorthand variant that you see (and will commonly use),
you specify three values:
• The name of the animation
• The duration
• The number of times your animation will loop
You can see these values in our animation declaration. Our anima‐
tion is called bobble, its duration is 2s (seconds), and it is set to loop
an infinite number of times.
As you can see, the animation declaration doesn’t really contain
much detail in terms of what gets animated. It sets the high-level
definition of what your animation will do, but the actual substance
of a CSS animation actually resides in its @keyframes rule.
Let’s look at our @keyframes rule to learn more:
@keyframes bobble {
0% {
transform: translateY(10px);
50% {
transform: translateY(40px);
100% {
transform: translateY(10px);

The first thing to notice is how our @keyframes rule is structured.
On the outside, it contains the @keyframes declaration followed by a
@keyframes bobble {
0% {
transform: translateY(10px);
50% {
transform: translateY(40px);
100% {
transform: translateY(10px);



Chapter 2: Introduction to CSS Animations

On the inside, it contains style rules (aka the actual keyframes)
whose selectors are percentage values (or the keywords from and
to...but ignore that for now):
@keyframes bobble {
0% {
transform: translateY(10px);
50% {
transform: translateY(40px);
100% {
transform: translateY(10px);

These style rules, often referred to as keyframe style rules, are pretty
much what you would expect. They just contain CSS properties,
such as transform, whose values will get applied when the rule
becomes active.
Now, what I have just explained is the easy part. Here is where
things could get a little bit confusing. Despite the animation prop‐
erty being declared in another style rule and your keyframes being
declared in their own @keyframes rule, they are very much joined at
the hip and one doesn’t really function without the other being
So let’s look at how the animation property and the @keyframes rule
are tied together.

The Name
The name you give your @keyframes rule acts as an identifier that
the animation property uses to know where the keyframes are:
#hexagon {
animation: bobble 2s infinite;
@keyframes bobble {
0% {
transform: translateY(10px);
50% {
transform: translateY(40px);
100% {
transform: translateY(10px);

What Just Happened




It isn’t a coincidence that our animation property refers to bobble,
and the name of our @keyframes rule is also bobble. If there is ever
an inconsistency in the names, your animation will not work.

Duration and Keyframes
So we now know how our animation property becomes aware of its
keyframes—that solves one mystery. The next (and more compli‐
cated!) mystery is when a particular keyframe style rule actually
becomes active.
As you recall, when you defined the keyframe style rules inside your
@keyframes rule, our selector wasn’t an actual time value. It was a
percentage value:
@keyframes bobble {
0% {
transform: translateY(10px);
50% {
transform: translateY(40px);
100% {
transform: translateY(10px);

What these values represent is the percentage of the animation that has
completed. Using the values from our example, the 0% keyframe rep‐
resents the start of our animation. The 50% keyframe represents our
animation’s midway point. And the 100% keyframe represents the
end of our animation.
When we think of things happening in an animation, we don’t think
in terms of percentage values. We typically think in terms of points
in time. To rationalize the differences between what CSS expects and
what we humans expect, we need to understand the role the dura‐
tion value plays. The duration value not only specifies the total
length of our animation, it also helps specify the time at which a
particular keyframe will become active.
Taking our 2-second-long animation as an example, the following
diagram illustrates how our percentage values map to units of time:



Chapter 2: Introduction to CSS Animations

The 0% keyframe becomes active at the beginning after 0 seconds
have elapsed. The 50% keyframe becomes active after 1 second has
elapsed. The 100% keyframe becomes active at the end, once 2 sec‐
onds have elapsed. Pretty simple, right? Right?!!

Calculating When a Keyframe Becomes Active for
Nontrivial Cases
The math for figuring out when the 0%, 50%, and 100% keyframes
for our 2-second animation work was pretty straightforward. You
could probably figure out when those keyframes become active
without breaking a sweat! The bad news is that you will run into sit‐
uations where you can’t figure out when a keyframe will play by just
looking at it. For example:
#someWeirdShape {
animation: blah 2.275s infinite;
@keyframes blah {
0% {
transform: translateY(10px);
25% {
transform: translateY(20px);
33% {
transform: translateY(80px);
90% {
transform: translateY(30px);

What Just Happened



100% {
transform: translateY(10px);

We have keyframes at 0%, 25%, 33%, 90%, and 100%. The duration
of our animation is 2.275 seconds. To figure out when a keyframe
becomes active for this example (and for all other examples!), all
you have to do is break out your calculator and multiply your ani‐
mation’s duration value by a keyframe’s percentage value. That’s it.
Using this approach, our keyframes will become active once 0 sec‐
onds, .56875 seconds, .75075 seconds, 2.0475 seconds, and 2.275
seconds have elapsed.
When I was learning about CSS animations for the first time, this
was the confusing part. If you are still a bit confused, just remember
that your keyframes have no concept of time. They only have a con‐
cept of percentage completed. The animation property with its
duration value helps create the missing link between keyframes and
time. Once you understand all of this, you will have jumped a major
hurdle in being able to make sense of what your CSS animation is
actually doing.

The third value you specify for the animation property determines
the number of times your animation will play. You can specify an
actual number, or you can specify the word infinite to have your
animation play forever and ever…and ever! That’s all there is to this
value. Not particularly exciting, is it? :P

The Longhand Version
The animation property isn’t always as concise as what we’ve seen
here. There is a longhand variant where you can specify the
animation-related properties individually. For our 2-second anima‐
tion, it looks as follows:
#hexagon {
animation-name: bobble;
animation-duration: 2s;
animation-iteration-count: infinite;



Chapter 2: Introduction to CSS Animations

You use the animation-name property to specify the name of
the @keyframes rule your animation relies on to run. You set your
animation’s duration with the animation-duration property, and
you specify how many times you want the animation to loop with
the animation-iteration-count property. There are a bunch more
properties where these came from, and we’ll cover all of them in a
little bit.

Browser Support/Vendor Prefixes?
The animation property is pretty well sup‐
ported these days, so you don’t need to use ven‐
dor prefixes (-webkit-animation, -mozanimation, etc.) in order to have it work across
most browsers. If for whatever reason you need
to support the very small number of users run‐
ning older browsers, use a library like -prefixfree to automatically deal with all of this vendor
prefixing hullabaloo.

In this chapter, we’ve looked at how a simple CSS animation works.
You learned all about how to declare an animation using the anima
tion property and how the @keyframes rule with its keyframe style
rules work. What we’ve seen is just a fraction of everything you can
do with CSS animations, but it’s the fraction you’ll use almost all the
time. What this means is that there are a bunch more animationrelated properties with their own quirks that we didn’t look at here.
Instead of boring you with all of that now, I figure it is better for you
to see them as part of examples that use them instead. You’ll thank
me later. Trust me. :P





Introduction to CSS Transitions

When you’re interacting with UIs, a lot of the animations you’ll see
won’t be of the CSS animation kind with its predefined keyframes.
They will instead be reactions to the things you are doing. Examples
of such reactions include a link underlining when you hover over it,
a menu flying in when you tap on a button, or a text element getting
bigger when it has focus. For animating these kinds of behaviors,
you will use CSS transitions.
To better understand CSS transitions, let’s take a moment to see one
in action. In the following example, you’ll see our friendly hexagon
shape again. Initially, it will look like so:


When you hover over it with your mouse, it will animate into this:

When your mouse is no longer on the hexagon, it returns to its nor‐
mal self:

While it is hard to demonstrate how cool and awesome this is in a
book, the image smoothly scales up and rotates when your mouse
cursor is over it. It then smoothly scales and rotates back to its origi‐
nal state when your mouse cursor goes elsewhere. All of this is made



Chapter 3: Introduction to CSS Transitions

possible thanks to the magic of CSS transitions, and in the following
sections, you’ll learn the basics of how to use them.

Creating a Simple Transition
Just like with CSS animations earlier, the way you’ll learn about CSS
transitions is simple. We are going to dive head first and just use
them. The first thing we’ll need to do is create a new HTML docu‐
ment and add the following things into it:
<!DOCTYPE html>
<title>CSS Transitions!</title>
#container {
width: 100%;
height: 290px;
background-color: #EEE;
display: flex;
align-items: center;
justify-content: center;
<div id="container">
<img id="hexagon"

After you’ve added all these lines of HTML and CSS, preview this
document in your browser. If everything works correctly, you’ll see
an almost re-creation of the example you hovered over in the previ‐
ous section:

Creating a Simple Transition



It is an almost re-creation because hovering over our smiling hexa‐
gon does nothing. That’s because we haven’t added the CSS respon‐
sible for that yet. Before we do that, let’s take a moment to see what
we are dealing with. There’s nothing crazy going on in the HTML
and CSS you just added. The main detail you should notice is the
markup used for displaying our hexagon image, which looks as fol‐
<div id="container">
<img id="hexagon"

Now that we’ve gotten this out of the way, it’s time to add our CSS
and get our example moving—literally. What we want to do is have
our hexagon image scale up and rotate when you hover over it. To
make this happen, add the following CSS toward the bottom of
your style block:
#hexagon:hover {
transform: scale3d(1.2, 1.2, 1) rotate(45deg);

All we’re doing is specifying a style rule that activates on hover
(thanks to the hover pseudoclass). We set the transform property
and call the scale3d and rotate functions that are responsible for
scaling and rotating our hexagon image. Once you’ve added this
CSS, preview this page in your browser and hover over the hexagon
image. You’ll see that the image now scales and rotates as expected.
The only problem is that the scaling and rotating is not smooth and
animated. The change is jarringly sudden!


Chapter 3: Introduction to CSS Transitions

To fix this, we are going to add a (you guessed it!) transition. Any‐
where inside your style block, preferably before where we added
our #hexagon:hover style rule, add the following style rule, which
contains the transition property:
#hexagon {
transition: transform .1s;

After you’ve added this style rule, preview your page again. This
time, when you hover over your hexagon image, you’ll see that it
smoothly scales and rotates into place. W00t!!!

What Just Happened
In the previous section, we re-created the example we saw at the
beginning by writing (or copying/pasting) some HTML and CSS.
The end result was a hexagon image that scaled and rotated with a
sweet transition when you hovered over it. The secret sauce that
made our transition work is the very appropriately named transi
tion property.
The way our transition property does its thing is pretty simple. It
animates property changes. In order for it to do that, you need to
specify just two things:
• The CSS property we want our transition to listen for changes
on. You can use the keyword all if you want to listen to all
property changes.
• How long the transition will run.
You can see how these things map to our transition that we have
tucked away inside the #hexagon style rule:
transition: transform .1s;

We have our transition property; it is listening for changes to
the transform property, and it runs for .1 seconds. We can see the
result of this transition working when we hover over the hexagon
image and change the transform property’s value:
#hexagon:hover {

What Just Happened



Our scale3d value goes from the default (1, 1, 1) to (1.2, 1.2,
1). Our rotate value goes from the default 0deg to 45deg. The CSS
transition takes care of figuring out those intermediate, interpolated
values to create the smooth animation you see over .1 seconds.

The Longhand Version
What we’ve seen so far is the transition shorthand variant. To specify
a basic transition using just the longhand properties, you can set
the transition-property and transition-duration properties as
#hexagon {
transition-property: transform;
transition-duration: .1s;

The property names should be pretty self-explanatory. You specify
the property you want your transition to act on with
the transition-property property (or use a value of all to listen
for all changes). You can set the transition-duration property to
specify how long the transition will run. There are more transitionrelated properties that you’ll need to know more about, but we’ll
deal with them later!

You’ve just learned the basics of how to define a simple CSS transi‐
tion. Just knowing how to define a CSS transition by specifying the
property to listen to and the transition duration will take you pretty
far. But that’s not good enough! For creating the kinds of more real‐
istic animations that your UIs deserve and your users expect, there
is actually a whole lot more for us to cover. We’ll do all of that in
subsequent chapters.



Chapter 3: Introduction to CSS Transitions


Working with CSS
Timing Functions

So far, we’ve created our animations and transitions by specifying
only a handful of things: the properties to animate, the initial and
final property values, and the duration. The exact syntax was differ‐
ent depending on whether we were dealing with a CSS animation or
a transition, but the general ingredients were the same. The end
result was an animation.
In this chapter, we are going to add one more ingredient into the
mix. We are going to kick things up a few notches by using some‐
thing known as a timing function (also referred to as an easing func‐
tion). In the following sections, you’re going to learn all about them!

What Is a Timing Function?
What a timing function is, or what it does, is a bit complicated to
explain using just words. Before I confuse you greatly with the ver‐
bal explanation, take a look at the following example if you have a
browser and internet connection handy: http://bit.ly/timing_func‐


What you see should look a little bit like the following:

While the static image doesn’t show all of this, in the live example
there are three circles that start at the left, slide to the right, and
return to where they started from. For all three of these circles, the
key animation-related properties we’ve set are almost identical. They
share the same duration, and the same properties are being changed
by the same amount. You can observe that by noticing that the cir‐
cles start and stop moving at the same time. Despite their similari‐
ties, though, the animation for each circle is obviously very
different. What is going on here? How is this possible?
What’s going on (and causing the difference in how each circle ani‐
mates) is the star of this chapter: the timing function. Each circle’s
applied animation uses a different timing function to achieve the
same goal of sliding the circles back and forth. So, let’s get back to
our original question: What exactly is a timing function? A timing
function is a function that alters the speed at which your properties
For example, your timing function could specify that your property
values change linearly with time (Figure 4-1).



Chapter 4: Working with CSS Timing Functions

Figure 4-1. Boring!
This will result in your properties changing at a constant speed. If
you want your property values to change in a more realistic way, you
could throw in a timing function that mimics a deceleration, as in
Figure 4-2.

Figure 4-2. Much less boring!

What Is a Timing Function?



In this case, the speed at which your property value changes slows
down very rapidly. It’s kind of like hitting the brakes on your car and
measuring the position before stopping. To summarize, there are
four important things to keep in mind about timing functions:

They don’t change where your property values start.
They don’t change where your property values end.
They don’t change your animation’s duration.
They alter the speed at which your property values change.

Now, we can spend all day looking at timing functions and learning
more about what they do. We aren’t going to do that. I have done
that before, and it is actually really boring! Instead, let’s shift gears
and look at how we can use these magical creatures (I mean…ingre‐
dients) in CSS.

Timing Functions in CSS
Despite how complicated timing functions seem, using them in CSS
is pretty straightforward. The various timing functions you can use


You can specify these timing functions as part of defining your ani‐
mation or transition, and we’ll look at the details of how exactly to
do that in the following sections.

Timing Functions in CSS Animations
In a CSS animation, you can specify your timing function as part of
the shorthand animation property, or by setting the animationtiming-function property directly. Here is a snippet of what the
shorthand and longhand variants might look like:


| Chapter 4: Working with CSS Timing Functions

/* shorthand */
#foo {
animation: bobble 2s ease-in infinite;
/* longhand */
#somethingSomethingDarkSide {
animation-name: deathstar;
animation-duration: 25s;
animation-iteration-count: 1;
animation-timing-function: ease-out;

When you declare your timing function as part of the animation
declaration, all of your keyframes will actually be affected by that
timing function value. For greater control, you can specify your tim‐
ing functions on each individual keyframe instead:
@keyframes bobble {
0% {
transform: translate3d(50px, 40px, 0px);
animation-timing-function: ease-in;
50% {
transform: translate3d(50px, 50px, 0px);
animation-timing-function: ease-out;
100% {
transform: translate3d(50px, 40px, 0px);

When you declare timing functions on individual keyframes, it
overrides any timing functions you may have set in the broader ani‐
mation declaration. That is a good thing to know if you want to mix
and match timing functions and have them live in different places.
declared in a keyframe only affects the path your animation will take
from the keyframe it is declared on until the next keyframe. This
means you can’t have an animation-timing-function declared on
your end (aka 100%) keyframe because there is no “next keyframe.”
If you do end up declaring a timing function on the end keyframe
anyway, that timing function will simply be ignored…and your
friends and family will probably make fun of you behind your back
for it.

Timing Functions in CSS



Timing Functions in CSS Transitions
Transitions are a bit easier to look at since we don’t have to worry
about keyframes. Your timing function can only live inside the tran
sition shorthand declaration or as part of the transition-timingfunction property in the longhand world:
/* shorthand */
#bar {
transition: transform .5s ease-in-out;
/* longhand */
#karmaKramer {
transition-property: all;
transition-duration: .5s;
transition-timing-function: linear;

There really isn’t anything more to say. As CSS properties go, transi‐
tions are pretty easy to deal with!

Default Timing Function Values
Specifying a timing function as part of your ani‐
mation or transition is optional. The reason is
that every animation or transition you use has
its timing-function property defined by default
with a value of ease.

Meet the Timing Function Curve
Timing functions are very visual creatures. While we use them in
terms of their CSS names (ease, ease-in, etc.), the way we’ll com‐
monly run into them is visually through something known as a tim‐
ing function curve (see Figure 4-3).



Chapter 4: Working with CSS Timing Functions

Figure 4-3. An example of a timing function curve
The timing function curve isn’t a generic representation for all tim‐
ing functions. Each timing function has a very specific timing func‐
tion curve associated with it. Figure 4-4 shows the timing function
curves look like for the predefined CSS timing functions.
You can sorta see from Figure 4-4 how the different timing func‐
tions end up affecting how our animation runs.
Now, there are two timing functions that we did not include in
Figure 4-4: steps and cubic-bezier. These timing functions
are special (which is usually code for complicated)! We will look at
each in more detail in the following sections.

Timing Functions in CSS



Figure 4-4. What the other timing functions look like



Chapter 4: Working with CSS Timing Functions

The cubic-bezier Timing Function
The cubic-bezier timing function is the most awesome of the tim‐
ing functions we have. The way it works is a little complicated. It
takes four numbers as its argument:
.foo {

These four numbers define precisely how our timing function will
affect the property that is getting animated. With the right numeri‐
cal values, you can re-create all of our predefined timing functions
(like ease, ease-in-out, etc.). Now, that’s not particularly interest‐
ing. What is really really interesting is the large variety of custom
timing functions that you can create instead.
For example, with the cubic-bezier timing function you can create
a timing function that looks like Figure 4-5.

Figure 4-5. This timing function goes beyond the 100% mark while

Timing Functions in CSS



What this timing function highlights is that your property value will
animate a bit beyond its final target and then snap back! That is
something you can’t do using the predefined timing functions. This
is just the tip of the iceberg on the kinds of timing functions you can
Now, you are probably wondering how we figure out the four num‐
bers to throw into the cubic-bezier timing function. It’s one thing
to look at a timing function curve and make sense of what is going
to happen. It is quite another to look at four boring numbers to
make sense of the same things. Fortunately, we’ll never have to cal‐
culate the four numbers ourselves. There are a handful of online
resources that allow us to visually define the timing function curve,
which, in turn, generates the four numerical values that correspond
to it.
My favorite of those online resources is Lea Verou’s cubic-bezier

You can use this generator to easily create a timing function by
defining the timing function curve, previewing what an animation
using that timing function would look like, and getting the numeri‐
cal values that you can plug into your markup. Pretty simple, right?



Chapter 4: Working with CSS Timing Functions

The step Timing Function
The last timing function we will look at affects the rate at which our
properties change but isn’t technically a timing function. This “nontiming function thing” is known as a step timing function (see
Figure 4-6).

Figure 4-6. The step timing function
function graph in Figure 4-6, your animated property progression
animation, your property progression reaches 100%. There is no
smooth transition between the various frames or “steps.” The end
result is a bit jagged.
In CSS, you can define the step function by using the appropriately
named steps function:

Timing Functions in CSS



.pictureContainer img {
position: relative;
top: 0px;
transition: top 1s steps(2, start);

The steps function takes two arguments:
• Number of steps
• A value of start or end to specify whether the first step should
occur at the beginning of the animation or whether the last step
occurs when the animation ends
step when the animation ends, my steps function declaration would
look as follows:
.pictureContainer img {
position: relative;
top: 0px;
transition: top 1s steps(5, end);

duration, the smoother your final result will be. That same state‐
ment applies for steps as well.

The icing on your animation- or transition-flavored cake is the tim‐
ing function. The type of timing function you specify determines
how lifelike your animation will be. By default, you have a handful
of built-in timing functions you can specify as part of the
animation-timing-function or transition-timing-function
properties for your CSS animations and transitions. Whatever you
do, just don’t forget to specify a timing function! The default ease
timing function isn’t a great substitute for some of the better ones
you can use, and your animation or transition will never forgive you
for it.
Also, before I forget, here is the full markup for the three sliding cir‐
cles that you saw at the beginning of the chapter:
.circle {



Chapter 4: Working with CSS Timing Functions

width: 100px;
height: 100px;
border-radius: 50%;
margin: 30px;
animation: slide 5s infinite;
#circle1 {
animation-timing-function: ease-in-out;
background-color: #E84855;
#circle2 {
animation-timing-function: linear;
background-color: #0099FF;
#circle3 {
animation-timing-function: cubic-bezier(0, 1, .76, 1.14);
background-color: #FFCC00;
#container {
width: 550px;
background-color: #FFF;
border: 3px #CCC dashed;
border-radius: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0 auto;
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
25% {
transform: translate3d(380px, 0, 0);
50% {
transform: translate3d(0, 0, 0);
100% {
transform: translate3d(0, 0, 0);
<div id="container">
<div class="circle" id="circle1"></div>
<div class="circle" id="circle2"></div>
<div class="circle" id="circle3"></div>

There is nothing crazy going on in this example, so I’ll leave you to
it…and see you in the next chapter!




Ensuring Your Animations
Run Really Smoothly

For the longest time, creating smooth and highly performant anima‐
tions using only web technologies was very difficult. The browsers
were slow, CSS properties weren’t optimized for rapid updates, the
graphics card didn’t do much work, you had to walk 15 miles in the
snow to get to school, and so on (see Figure 5-1).
You remember those days, right?

Figure 5-1. What a browser looked like back in the day


Fortunately, nowadays those problems have mostly gone away.
While you still might have to walk 15 miles to get to school (in the
snow, barefoot, wolves chasing you, etc.), our browsers have gotten
really good about helping ensure our animations don’t jitter, lag,
tear, or exhibit any other unwanted visual side effects that are jarring
to see.
Now, this doesn’t mean we can pack our bags and go home. Our
browsers provide you with all the controls to create animations that
run well, but you need to know which controls to fiddle with. Don’t
worry—that’s where this chapter comes in! In the following sections,
you’ll learn how to ensure your animations run really really well.

What Is a Smooth Animation?
Before we start digging into the code, let’s step back for a moment
and clarify what we mean by a smooth animation. At a high level,
there are three major things smooth animations have going for
They are responsive.
The time between your triggering an animation (by clicking,
tapping, dragging, etc.) and your animation starting to do
something is as short (~100 ms) as possible.
They run at 60 frames per second (fps).
Unless you are running some space-age hardware, your pixels
are painted to the screen 60 times a second (commonly meas‐
ured as frames per second). The things you animate and paint to
your screen can’t go higher than that magical 60 fps number, but
they certainly can go lower—noticeably lower! To ensure the
best possible performance, smooth animations always run at 60
They are responsive (#1) and fast (#2) on mobile devices.
It’s one thing for your animation to run awesomely well on your
high-powered dev machine. It is another thing altogether for
your animation to run awesomely on a mobile device where
processor, memory, and graphics capabilities are less abundant.
With more and more people primarily using a mobile device to
surf the web and get to their content, your animations need to
run well on them too.


| Chapter 5: Ensuring Your Animations Run Really Smoothly

These three criteria may look a bit scary, but as you will see in a little
bit, there are just a few tips you need to keep in mind to easily
ensure your animations run as smooth as butter:

Anyway, with all this said, let’s roll up our sleeves and look at how
exactly we are going to accomplish all of this.

Creating Responsive 60 fps Animations
To create animations that are responsive and run at 60 fps, there are
two things you should do:
• Primarily animate CSS properties that we’ll call animationfriendly. These are properties that are optimized heavily for
rapid changes and screen updates.
• Offload work to the GPU (aka the graphics card) where things
like animations can be handled much better than your lessoptimal-for-visual-stuff CPU.
Now that you have an idea of what to expect, it’s time to get techni‐
cal and learn some new CSS techniques along the way.

Creating Responsive 60 fps Animations



Meet the Animation-Friendly Properties
Your browser can animate certain types of CSS properties really effi‐
ciently. We’ll call these the animation-friendly properties, and they
are transform, opacity, and filter. Limiting the properties you
can animate to just these three may seem a bit odd, but take a look at
everything you can do with them:

This property allows you to change an element’s position using
the translate function, make it bigger/smaller using the scale
function, set a rotation using the…um…rotate function, and
skew the element using the skew function.

This property allows you to adjust an element’s transparency.

This property allows you to apply visual effects such as drop
shadows, glows, color corrections, and more to your elements.
As you can see, you can do quite a lot with these properties. Now,
you are probably wondering what it is about these three properties
that makes them special. The full answer for that requires looking at
browser internals and how pixels make it onto the screen. That goes
a bit beyond what we need to focus on right now, but the short
answer is that these properties make your browser do the least amount
of work to get visual updates to the screen. If our goal is to have these
visual updates appear 60 times a second, the less time your browser
spends doing unnecessary work, the more easily it can stay at the 60
fps mark.
Now, before we wrap this section up, there is one really important
thing to mention. There will be times when what you are trying to
animate can’t be represented by transform, opacity, and filter.
During those times, it is totally OK to animate the other CSS prop‐
erties. For example, animating an element’s color is a common
scenario, and there is nothing wrong with using the color or
background-color properties for that task. The transform, opac
ity, and filter properties can be used to represent many
animation-oriented scenarios, but don’t try to force their use when
another CSS property would be better. Use your judgment on that.



Chapter 5: Ensuring Your Animations Run Really Smoothly

Don’t Animate margin, top, left, and So On!
For animation purposes, unless you have a specific need, you abso‐
lutely should not animate the margin, padding, top, left, bottom,
or right CSS properties. That’s right…I said it! Since you probably
know this may sound a bit counterintuitive. The reason for my
seemingly heretical stance has to do with performance. Let me
Each time you modify the value set on these properties (and other
layout-impacting properties like it), your browser does extra work
to calculate how the modifications affect the layout of your entire
your layout. Using these properties infrequently as part of a docu‐
ment load or resize is fine. Using these properties and modifying
their values 60 times a second as part of an animation or transition
is definitely not great. Calculating and recalculating the elements in
your page is one of the most expensive operations your browser can
You could choose to set the position property of the elements you
are animating to fixed or absolute. That avoids your browser hav‐
ing to calculate the layout for your entire document. While this is a
better optimization, your browser still has to do unnecessary
figuring out the box model. Sigh.
For best results, keep things simple and just change the transform
property when trying to change an element’s position.

Push Element Rendering to the GPU
Animating elements is a very visual and graphics-heavy operation. It
would seem reasonable that they would primarily render on your
GPU instead of the CPU, which juggles a billion different things,
right? The answer is obviously yes. Too bad that doesn’t match real‐
ity. Whether your animated elements render on the GPU or CPU
depends on the CSS property you are modifying, the device you are
viewing the animation on, and what each browser decides to do.
You can avoid all of this uncertainty by clearly telling your GPU to
take some initiative and render the elements that need to be animated.
Creating Responsive 60 fps Animations



While that sounds complicated, it is actually fairly straightforward.
You do this by setting a translate3d (or translateZ) transform on
the elements you want your GPU to handle.
Here is an example of what this looks like:
#slidePanel {
transform: translate3d(0, 0, 0);

By doing this, we’ve pushed the rendering of the slidePanel ele‐
ment entirely to the graphics card. This means your animations on
the slidePanel element will render on something dedicated to
ensuring they run smoothly.
This seems like an awesome trick to ensuring smooth animations,
right? Well, it does…but as with all awesome tricks, you need to use
it responsibly.

Minimize the elements you want the GPU to deal with
Push only to the elements you will be animating to the GPU. For
every element that you send to the GPU, your browser will spend
time and video memory (on your GPU) to store the element. The
fewer elements you optimize in this way, the better off you will be.
Also, while it goes without saying, resist the temptation to do this:
* {
transform: translate3d(0, 0, 0);

This tells your browser to push every element to your GPU! For the
performance and memory reasons mentioned earlier, you definitely
shouldn’t do this.

Give your browser a chance to push an element to the GPU
Pushing an element to the GPU at the same time you are about to
animate properties on it is not a good idea. Take a look at the follow‐
ing snippet:
#blah {
transition: all .2s ease-in-out;
background-color: #FFF;
#blah:hover {
transform: translate3d(0, 0, 0);



Chapter 5: Ensuring Your Animations Run Really Smoothly

background-color: #EEE;

When we hover over the blah element, we animate the backgroundcolor property from #FFF to #EEE. To ensure the blah element’s ren‐
dering is hardware-accelerated, we use our translate3d trick inside
the style rule where the hover takes place:
#blah {
transition: all .2s ease-in-out;
background-color: #FFF;
#blah:hover {
transform: translate3d(0, 0, 0);
background-color: #EEE;

While that seems like a good idea, it really is not. By the time your
element is transferred to the GPU, your browser will have already
started to animate the transform property. Any optimizations you
might have hoped to gain would be lost.
The right behavior is to pick a time prior to when your element’s
properties are about to get animated and push the element to the
GPU at that time. The easiest time is during page load, but you can
optimize for a later time if you can better predict when the user will
trigger an animation. Here is what a revised version of our example
would look like:
#blah {
transition: all .2s ease-in-out;
background-color: #FFF;
transform: translate3d(0, 0, 0);
#blah:hover {
background-color: #EEE;

This time, when our page loads and our styles are processed, our
blah element is pushed to the GPU. This ensures that whenever the
blah element is hovered over, there is no doubt about where the
rendering is taking place—it’s in GPU country!

Creating Responsive 60 fps Animations



What Is This Magical will-change Property?
At the end of the day, our browser knows more than we do about
which elements to optimize and when the right time to optimize
those elements is. We can do our best to proactively predict and do
the right thing, but we will always be left wondering whether we
second-guessed the browser or not. We can sort of see this with the
various caveats each of our awesome tricks came with. None of
them was a slam dunk that guaranteed your animations would run
really smoothly.
The newish will-change property can help solve this. This prop‐
erty allows you to tell your browser which properties you’d like to
animate, and its usage looks a little bit like this:
.square {
width: 450px;
height: 450px;
animation: robotSlide .2s linear;
will-change: transform, opacity;
@keyframes robotSlide {
0% {
transform: translate(10px, 10px);
opacity: 1;
50% {
transform: translate(100px, 10px);
opacity: .5;

Your browser uses the information you provide to figure out the
best way to optimize your elements. It saves you from having to do
any extra work, and the end result might be rendering the element
on the GPU—or it might not, if the browser determines that doing
so might result in worse performance. Your browser might even
have some secret optimization that only it can pull off. That’s the
nice thing about just letting the browser deal with all of this anima‐
tion optimization business.
The will-change property seems like the perfect solution we’ve all
been looking for, right? Why is this not the first (and only) thing we
learn about in this chapter? That’s where the bad news comes in.
This property is fairly new, and browser support is still spotty. Some


Chapter 5: Ensuring Your Animations Run Really Smoothly

of the major browsers don’t even support it. How exactly it figures
out what optimizing magic to do, and when, is something that still
isn’t fully understood. Until all of those things change, you should
be cautious about using this property…no matter how awesome it

Phew! Who knew that animating a handful of elements has so much
performance-related backstory and intrigue? The main takeaway
here is that you need to do just two things to create really perform‐
ant and smooth animations:
• Use the animation-friendly properties of transform, opacity,
and filter as much as possible.
• Responsibly push elements you are animating to get rendered
by the GPU.
As long as you do these two things, your animations will be respon‐
sive, run blazingly fast at 60 fps, and look good on mobile devices as
well. What more could we ask for? Maybe this totally sweet image:





Transitions, Animations,
and JavaScript

So far, while learning the basics of how CSS animations and transi‐
tions work, we haven’t deviated too far from the safe middle road.
We loaded the page, and an animation automatically started to play.
We hovered over an element, and some property on that element
animated in some way. The middle road is fine for many cases, but
there is so much more we can do. In this chapter, we are going to
take some less beaten paths and expand the ways we can interact
with animations and transitions by adding in a dash of JavaScript.
By adding JavaScript, we can start to do a lot more things, such as:
• Having our animations play at a time other than during page
load or in response to simple gestures like hover, focus, and so
• Defining the properties we animate, their values, or both on the
fly as opposed to having them always be predefined in our CSS.
• Having the element whose properties we animate be wildly dif‐
ferent than the element we trigger the animation on.
These are all situations that you’ll run into frequently, and they also
are situations that you simply can’t bring to life using only CSS. You
need to involve JavaScript, and this chapter will show you some of
the ways you can do that. Also, don’t worry if you are not a Java‐
Script expert. We’ll stay out of the complex stuff as much as possible,
but we will review a few key JavaScript concepts that you will see
over and over again as you go about creating animations.

It’s Just Property Changes
As you’ve heard a billion times by now, our animations work off of
property changes. Our properties start off with a value, a few
moments go by, and our properties animate to a new value. Now,
here is the important detail about all of this. Our browser does not
care where the various values for an animated property come from. As
long as they come from somewhere, everything is golden. This little
detail makes up the cornerstone of how JavaScript, animations, and
transitions can work well together.

The Example
The best way to make sense of what all of this means is to look at an
example. Let’s say that you have a rectangle that looks like this:

If we were to click or tap anywhere inside this rectangle, the rectan‐
gle’s color will change:

This color change won’t be sudden—at least not on our computers
when we create this in a few moments. The color will animate to its
new value. As you keep clicking or tapping on the rectangle, you will
see another background color animate into view. You can do this all



Chapter 6: Transitions, Animations, and JavaScript

day, as the background colors are randomly generated thanks to
some help from our old friend, JavaScript.

Initial State Using CSS, Changes Using JS
This example follows a pattern that you will use frequently when
working with animations using both CSS and JavaScript. The pat‐
tern loosely looks like:
1. Define the initial state using CSS.
2. Make changes using JavaScript.
Let’s see how this pattern applies to our random color exam‐
ple. First, create a new HTML document and add the following
HTML, CSS, and JavaScript into it:
<!DOCTYPE html>
<title>Changing Color</title>
#container {
width: 75%;
height: 290px;
cursor: pointer;
box-shadow: 0px 0px 15px #CCC;
border-radius: 10px;
margin: 0 auto;
background-color: yellow;
transition: background-color .2s ease-out;
<div id="container">
var container = document.querySelector("#container");
var zeros = "0000000";
container.addEventListener("click", changeColor, false);
function changeColor(e) {
var color = "#" + Math.floor(Math.random() *

It’s Just Property Changes



var colorLength = color.length;
if (colorLength < 7) {
color += zeros.substring(0, zeros.length - colorLength);
container.style.backgroundColor = color;

Take a few moments to understand what is going on. Once you’ve
done that, read on! In the following sections, we’ll look at each of the
interesting things we see here in more detail.

Initial state and CSS
When you first saw the example, you saw a yellow rectangle. The
markup behind it isn’t too crazy. The HTML for it is just a div ele‐
ment with an id value of container:
<div id="container"></div>

The more interesting stuff is in the CSS, and it looks as follows:
#container {
width: 75%;
height: 290px;
cursor: pointer;
box-shadow: 0px 0px 15px #CCC;
border-radius: 10px;
background-color: yellow;
transition: background-color .2s ease-out;

Take a moment to look through the various CSS properties being set
and their values. Most of them just deal with our rectangle’s appear‐
ance, but we do define our transition property where we listen for
changes to the background-color property and animate any change
over a duration of .2s with an ease-out.



Chapter 6: Transitions, Animations, and JavaScript

Changes and JavaScript
Our rectangle (aka our container) element’s background color
changes every time we click on it. That is handled entirely via the
following lines of JavaScript:
var container = document.querySelector("#container");
var zeros = "0000000";
container.addEventListener("click", changeColor, false);
function changeColor(e) {
var colorLength = color.length;
if (colorLength < 7) {
color += zeros.substring(0, zeros.length - colorLength);
container.style.backgroundColor = color;

The container property stores a reference to our container div
element. When we click on this element, we call the changeColor
function that is responsible for generating a random color and set‐
ting it. All of that is well and fine, but the line of code that is really
important for the animation we eventually see is the following:
container.style.backgroundColor = color;

In this line, we are setting our container element’s background
color to the new, randomly generated value. Changing our back‐
ground color here starts our transition (defined earlier in CSS and
applied on the same container element) and animates the back‐
ground color property to the new value.

What Just Happened?
In the previous few sections, we walked through an example where
our background color animated to a new value each time you
clicked/tapped. The reason why the animation works is pretty sim‐
ple, but it is worth repeating in slightly more detail here.
In the CSS that applies to our container element, we defined our
transition where we listen for changes to the backgroundcolor property:

It’s Just Property Changes



#container {
width: 75%;
height: 290px;
cursor: pointer;
box-shadow: 0px 0px 15px #CCC;
border-radius: 10px;
background-color: yellow;
transition: background-color .2s ease-out;

In our JavaScript, we have some code that changes the background
color on the same container element:
container.style.backgroundColor = color;

Because our transition is listening for background color changes on
the container element and our JavaScript is changing the back‐
ground color on the same container element, the result is an ani‐
mation from one background color value to another.
To us, defining styles in CSS and changing them via JavaScript to
trigger an animation seems out of this world. To our browser, it is
just business as usual. See, our browser doesn’t really care how CSS
properties and their values find their way onto an element. That is
because they only care about something known as the computed
style (see Figure 6-1).
What you see here is the computed style for our container element;
notice the properties and the values set on it. You can see our tran
sition property (entirely in longhand), the background-color
property, and a bunch of other properties that detail other aspects of
how this element looks. This is why our example works as well as it
does. From our browser’s point of view, the computed value for the
background color changes. It doesn’t matter that it changes via Java‐
Script. The end result is that the background color changes and a
transition is listening for changes on it.



Chapter 6: Transitions, Animations, and JavaScript

Figure 6-1. The Computed tab in the Chrome Dev Tools is a great way
to figure out what style properties are set and their values

A Tale of Two Styling Approaches
By now, this should come as no surprise to you. Setting CSS proper‐
ties and changing the values on them is something you’ll need to
know how to do as part of creating animations. If you are familiar
with all of this, feel free to skip on to the next section. If you aren’t
familiar with this, then read on.
When it comes to setting CSS styles using JavaScript, you have two
• Setting a CSS property directly on the element. (We kinda saw
this already when we set the background color earlier).
• Adding or removing class values from an element, which may
result in certain style rules getting applied or ignored.
Let’s look at both of these cases in greater detail, as we’ll use these
techniques in many of the animations we’ll be dealing with in the

A Tale of Two Styling Approaches



Setting the Style Directly
Every HTML element that you access via JavaScript has a style
object. This object allows you to specify a CSS property and set its
value. For example, here we set the background color of an HTML
element whose id value is superman:
var myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";

To affect many elements, you can do something like this:
var myElements = document.querySelectorAll(".bar");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;

In a nutshell, to style elements directly using JavaScript, first we have
to access the element. We’re using the querySelector method to do
that. The second step is just to find the CSS property you care about
and give it a value. Remember, many values in CSS are actually
strings. Also remember that many values require a unit of measure‐
ment, like px or em, to actually get recognized.

Special-Casing Some Names of CSS Properties
JavaScript is very picky about what makes up a valid property
name. Most names in CSS would get JavaScript’s seal of approval, so
you can just use them straight from the carton. There are a few
things to keep in mind, though.
To specify a CSS property in JavaScript that contains a dash, the
tried-and-true approach is to simply remove the dash and capitalize
the first letter of each word that follows the first. For example,
background-color becomes backgroundColor, border-radius
becomes borderRadius, and so on.
A newer approach is to ignore all of this and just use array access:
el.style["background-color"] = "#FFFFFF";

I’m old school, so I prefer the first approach. If you are going to rely
on array access, make sure to test on any older browsers you may
care about.
Also, certain words in JavaScript are reserved and can’t be used
directly. One example of a CSS property that falls into this special


Chapter 6: Transitions, Animations, and JavaScript

category is float. In CSS it is a layout property. In JavaScript, it
stands for something else. To use a property whose name is entirely
reserved, prefix the property with css (so float becomes

Adding and Removing Classes Using JavaScript
The second way of setting CSS styles using JavaScript involves
adding and removing class values that, in turn, change which style
rules get applied. For example, let’s say you have the following style
.disableMenu {
display: none;

In HTML, you have a menu whose id is dropDown:
<ul id="dropDown">

Now, if we wanted to apply our .disableMenu style rule to this ele‐
ment, all you would need to do is add disableMenu as a class value
to the dropDown element:
<ul class="disableMenu" id="dropDown">

To accomplish the same result using JavaScript, we are going to use
the classList API. This API makes it dirt simple to add or remove
class values from an HTML element. To add the disableMenu class
name to our dropDown element, use the add method on the HTML
element’s classList property:
var theDropDown = document.querySelector("#dropDown");

A Tale of Two Styling Approaches



To remove the the disableMenu class name, we can call the class
List API’s remove method:
var theDropDown = document.querySelector("#dropDown");

That’s all there is to working with class values in JavaScript, but that
isn’t all there is to the classList API. If you are feeling especially
bored, there is a whole lot more you can do with the classList API
beyond just adding and remove class values. To see the class
List API and all of its hobbies described in greater detail, check out
the post “Using the classList API” on my website.

What About CSS Animations?
Here is a difficult truth that I want to share with you before we
wrap things up: CSS animations can’t be used easily with all of the
JavaScript stuff we have been talking about. The reason has to do
with how CSS animations are defined. The animation property by
itself contains very little that you may want to modify using Java‐
Script outside of when it starts and stops. All of the interesting stuff
a CSS animation does is defined by its keyframes. Here is the prob‐
lem: accessing the keyframes via JavaScript is a painful task, and
changing the values of properties found inside any individual key‐
frame is even more painful. Outside of a few generic properties, CSS
animations were never designed to be dynamically changed once
the animation has started running. They are a bit boring that way.
To contrast the boringness of CSS animations, we have CSS transi‐
tions. Because of how CSS transitions react to property changes
anywhere on the element or elements they are listening for changes
on, they are a great fit for dealing with changes provoked by Java‐
Script. For this reason, don’t be surprised if almost all of the anima‐
tions we modify with JavaScript rely on a CSS transition
somewhere to make everything work.

Animating with requestAnimationFrame
There will be situations when you need to fully animate an element’s
CSS properties using JavaScript without relying on CSS transitions
or animations. These aren’t situations where you toggle some class
values on an element or change a style property once in a blue
moon. This is where you are running some JavaScript that needs to


Chapter 6: Transitions, Animations, and JavaScript

animate things on your page at a cool 60 fps without skipping a beat.
All of this animation-related JavaScript is typically housed or trig‐
gered from a function commonly known as an animation loop.
Ensuring our animation loop runs smoothly depends on a lot of fac‐
tors. It depends on what else is going on in your page, like what
other animations might be running in parallel; how the user is inter‐
acting with the page (clicking, typing, scrolling, etc.); and what
browser you are using and when it decides to repaint or update what
is shown on the screen. It’s not a simple problem.
Traditionally, you may have used a function like setInterval or its
funnier cousin setTimeOut to power your animation loop. The
problem with these two functions is simple: they don’t understand
the subtleties of working with the browser and getting things to
paint at the right time. They have no awareness of what is going on
in the rest of the page. These qualities made them very inefficient
when it came to powering animations because they often request a
repaint/update that your browser simply isn’t ready to do. You
would often end up with skipped frames and other horrible side
Fortunately, we have something better! I’d like you to meet requestA
nimationFrame. What makes requestAnimationFrame so awesome

is that it doesn’t force the browser to do a repaint that may never
happen. Instead, it asks the browser nicely to call your animation
loop when the browser decides it is time to redraw the screen. This
means your code wastes no effort on screen updates that never hap‐
pen. Skipped frames are a thing of the past. Best of all, because
requestAnimationFrame is designed for animations, your browser
optimizes the performance to ensure your animations run smoothly
depending on how many system resources you have available,
whether you are running on battery or not, whether you switch
away to a different tab, and so on.
Words haven’t been invented in the English language to describe
how awesome the requestAnimationFrame function is. The way you
use requestAnimationFrame is very simple. Whenever you want to
redraw your screen, simply call it along with the name of the anima‐
tion loop function (aka a callback) that is responsible for drawing
stuff to your screen:

Animating with requestAnimationFrame



Note that the requestAnimationFrame function isn’t a loop. It isn’t a
timer. You need to call it every time you want to get the screen
repainted. This means, unless you want your animation to stop, you
need to call requestAnimationFrame again through the same call‐
back function that you specified. I know that sounds bizarre, but it
looks as follows:
function animate() {
// stuff for animating goes here

The animate function is the callback function for our requestAnima
tionFrame call, and it will get called every time the browser needs to
redraw once it starts running.
If this is your first time seeing the requestAnimationFrame func‐
tion, its purpose may still seem a little mysterious. Don’t worry. We
will be looking at a handful of examples later on that owe everything
to requestAnimationFrame’s really performant way of repeatedly
calling some code.

To create the kind of animated interactions your users will see when
they interact with your UIs, you can’t get away with just using CSS.
You need to add JavaScript into the mix. As you saw in this chapter,
that’s not as scary as it sounds. In future chapters, we’ll look at some
practical examples that will really help you see the many ways CSS
and JavaScript can play nicely together to help us create awesome



Chapter 6: Transitions, Animations, and JavaScript


CSS Animations Versus
CSS Transitions

As you’ve seen, right now in CSS you have two techniques for visu‐
alizing change that are competing for your attention: CSS anima‐
tions and CSS transitions. On the surface, they seem similar. But
once you get to know them, sort of like identical twins, you’ll find
that they are quite different in many important ways. In this chapter,
we’ll explore the similarities and the differences that exist between
animations and transitions.
Almost everything you will see here will be a review of the core con‐
cepts the previous chapters introduced, but hopefully seeing them in
the context of comparing animations and transitions will give you a
different perspective on what you learned. Besides, the more you see
animations and transitions defined and described, the more fluent
you will be in thinking about them and knowing what to do.

As I just mentioned, animations and transitions seem very similar—
especially from a distance. They both allow you to:
• Specify which CSS properties to listen for changes on
• Set timing (easing) functions to alter the rate of going from a
one property value to another
• Specify a duration to control how long the animation or transi‐
tion will take

• Programmatically listen to animation and transition-specific
events that you can then do with as you wish
• Visualize CSS property changes
Beyond these points, though, you will see that animations and tran‐
sitions diverge a bit and let their uniqueness shine through. Let’s
look at those unique qualities in greater detail…and possibly pit
them against each other in the playground for being different.

Animations and transitions show their differences when it comes to
how you trigger them to play, whether they loop easily, how compli‐
cated of a transition you can define, how formal you must be in
being able to use them, and how well they play with JavaScript. Let’s
explore those topics in greater detail.

One of the major differences between animations and transitions is
in how you trigger them to start playing.
A transition only plays as a reaction to a CSS property value that has
changed. It doesn’t care how a CSS property value was changed. As
long as the computed value is different than what it recognizes, the
transition starts firing.
For example, a common scenario is using the :hover pseudoclass to
change the value of a CSS property (see Figure 7-1).

Figure 7-1. A common situation



Chapter 7: CSS Animations Versus CSS Transitions

The CSS for this could look as follows:
.circle {
border-radius: 100px;
background-color: #DDF0FF;
border: 10px solid #00CC00;
.circle:hover {
transform: scale(2, 2);

By defining a transition that listens for a transform change, you
could see the circle growing from its normal size:
.circle {
border-radius: 100px;
background-color: #DDF0FF;
border: 10px solid #00CC00;
transition: transform .2s ease-out;
.circle:hover {
transform: scale(2, 2);

Another way of triggering a transition is to use JavaScript to pro‐
grammatically add or remove CSS classes to simulate a CSS property
value change. As long as the computed value of a property the tran‐
sition is listening for changes, the transition will become active.
Rounding out our ways of making a property change, you can use
JavaScript to set an inline style that changes a property your transi‐
tion is listening for. To make our circle’s size change on click, your
code might look as follows:
var circle = document.querySelector(".circle");
circle.addEventListener("click", changeSize, false);
function changeSize(e) {
circle.style.transform = "scale(4, 4)";

The highlighted line is the most interesting one. Even though I am
setting the transform property via JavaScript, because our transition
has already been defined in CSS, this change will get animated. This
ability for transitions to be triggered by changes in code is one of the
coolest things ever, and you’ll see us take advantage of it in later tuto‐
rials when we do more advanced things.
Animations, on the other hand, don’t require any explicit triggering.
Once you define the animation, it will start playing automatically.
Differences |


You can control this behavior by setting the animation-playstate property to running or paused.

This is pretty simple. We can easily make animations loop by setting
the animation-iteration-count property. You can specify a fixed
number of times you want your animation to repeat:
animation-iteration-count: 5;

If you just want your animation to loop forever, you can do that as
animation-iteration-count: infinite;

Transitions, on the other hand, don’t have a property that specifies
how many times they can run. When triggered, a transition runs
only once. You can make a transition loop by fiddling with the
transitionEnd event, but that isn’t particularly straightforward—
especially when compared with how easy it is to make animations
loop. We won’t be looking at that event in this book, but you can
find more about it in my post “The TransitionEnd Event”.

Defining Intermediate Points/Keyframes
As you’ve seen, with an animation, you have the ability to define
keyframes that give you more control over your CSS property values
beyond just the start and the end (Figure 7-2).

Figure 7-2. Animations allow you to specify intermediate points where
anything could happen!



Chapter 7: CSS Animations Versus CSS Transitions

You can set as many keyframes as you want, and when your anima‐
tion plays, each keyframe will be hit with the specified property
changes reflected. Each keyframe can even have its own timing
function, so you can make the interpolation between the CSS prop‐
erty values defined between keyframes really interesting if you want!
With a transition, you don’t have much control over anything
beyond the end result (Figure 7-3).

Figure 7-3. Transitions go from point A to point B…that’s it!
A transition simply goes from an initial state to the final state. You
cannot specify any points in between like you can with an anima‐
tion, so a transition might not be a good choice for anything
remotely complex.

Specifying Properties Up Front
Next, we’ll go over the difference in formality between animations
and transitions when it comes to defining a transition between CSS
property values.
As expected, on the formal side, you have transitions. Every CSS
property you want recognized by your transition must be explicitly
For example, let’s say you have some CSS that looks like the
#mainContent {
background-color: #CC0000;
transition: background-color .5s ease-in;
#mainContent:hover {
cursor: pointer;
background-color: #000000;
width: 500px;

Differences |


Upon hover, we specify a different value for background-color as
well as width. Our transition is listening only for changes on
background-color, though. If we want our transition to react to
changes in both the background-color and width properties, we
will need to explicitly add another transition entry for the width
#mainContent {
background-color: #CC0000;
transition: background-color .5s ease-in, width .5s ease-in;
#mainContent:hover {
cursor: pointer;
background-color: #000000;
width: 500px;

You could tell your transition to listen for all property changes and
specify the all keyword, but for performance reasons, you shouldn’t
default to it. Of course, as with all claims about performance bene‐
fits or pitfalls, you should see if it is applicable to your scenario
before taking my word for it.
With animations, you can specify properties on a whim in each key‐
frame without having to do anything that even closely resembles
declaring them:
@keyframes imageSlide {
0% {
transform: translate(-150px, 0);
20% {
transform: translate(50px, 0)
height: 200px;
80% {
transform: translate(200px, 0)
height: 300px;
100% {
transform: translate(600px, 0)
background-color: #FFFFFF;

In this example, the height and background-color properties of
whatever element we’re animating will smoothly transition—even if
the property was never listed before!



Chapter 7: CSS Animations Versus CSS Transitions

Interaction with JavaScript
Long and Boring Block of Text Ahead
TL;DR: if you want to manipulate how some‐
thing animates using JavaScript, just use a CSS
transition. CSS animations are no fun in this
area because of how complex it is to access and
manipulate them using code.

In some cases, a transition or animation you declare in CSS will be
good enough. You specify in CSS your starting value, the ending
value, and any intermediate values that you want your properties to
take. Your animation or transition will read these values and take
care of business from there. As we saw earlier with our random
color example, sometimes you will need to change the final property
value on the fly. For such situations, you will need something like
When it comes to combining JavaScript with either an animation or
transition, there is no contest: you almost always want to use a tran‐
sition. Using an animation with JavaScript is possible…in much the
same way it is possible to win at the cinnamon challenge. It isn’t
impossible to make it work, but chances are, you don’t want to do it.
The reason for this difference has to do with how transitions and
animations work.
Animations are very specific in what they do. The reason is that the
@keyframes rule clearly lays out the path your animation will take as
it is running. Every property value that will get affected is defined in
your keyframes. There is no room for interpretation or alteration.
Attempting to change your keyframes in JavaScript requires a very
complicated series of steps that involves actually modifying the
@keyframes style rule itself. If you’ve ever had to manipulate CSS
that lives inside a style rule, you know that it is pretty unintuitive. If
you’ve never done that before, it is definitely worth trying at least
once…and only once.
In contrast to the predefined path of an animation is the transition.
Transitions are not as well defined as they may seem. Your transition
will kick in when a property it is listening for changes. As you saw
earlier, the transition doesn’t care how the properties it is listening
for changes. As long as the property changes somehow, the transi‐
Differences |


tion will get to work. This means that for interactive scenarios that
don’t involve a predefined starting and ending point, you can do a
lot of interesting things by deferring all transition-related heavy lift‐
ing by setting the transition property in CSS and manipulating all of
the values the transition is listening for using JavaScript. We’ll be
seeing a lot of this in the future.

Now that you have a good idea of the full range of what animations
and transitions can do, you probably already have your thoughts on
when you would use one over the other.
My general approach for determining when to use which goes like
• If what I want requires the flexibility provided by having multi‐
ple keyframes, then I go with an animation.
• If I am looking for a simple from/to animation, then I go with a
• If I want my animation to start automatically or loop, then I go
with an animation.
• If I want to manipulate the property values that I wish to ani‐
mate using JavaScript, I go with a transition.
Now, with enough effort and JavaScript tomfoolery, you can neutral‐
ize any of the differences listed in deciding whether to use a transi‐
tion or an animation. My recommendations are based on the
common cases where you take a transition or animation mostly at
face value. Herculean efforts to change their default behavior are
admirable but often unnecessary.



Chapter 7: CSS Animations Versus CSS Transitions


Learning from Examples

This is probably the part of the book you have been waiting for. Or
dreading. This is the part where we take everything we’ve learned in
the previous seven chapters and apply it toward creating the types of
animations you see used throughout our user interfaces. Yes, this
does mean that we’ll be seeing less of happily smiling geometric
shapes and more of the traditional buttons, scroll bars, links, and
other widgets that everybody sees, clicks, types, or taps on every day.
We’ll start off with some simple examples before we slowly start
turning up the complexity and looking at examples that push the
boundaries on what we can do using HTML, CSS, and JavaScript.


Animating Your Links to Life

Back in the day, links were very predefined and boring. They were
made up of underlined blue text that turned purple if you had
already visited them. Often, there was also a mysterious active state
where your links would turn red when you were interacting with
them. They looked sorta like the following:

Today, you have a lot more control to make your links look as bor‐
ing or as exciting as you want. Since we are all about doing exciting
things, this tutorial will show you a handful of examples that you
can learn from to make your links behave differently (in an awe‐
some way!) when you interact with them. Spoiler alert: The main
way we are going to do that is by relying on our old friend, the CSS


The Starting Point
To help you focus on what is important, let’s start with some HTML
that contains some basic styling and links. In a new HTML docu‐
ment, add all of the following:
<!DOCTYPE html>
<title>Cool Hover Stuff!!!</title>
body {
background-color: #EEE;
margin: 50px;
h1, li {
font-family: sans-serif;
h1 {
background-color: #FFCC00;
display: inline-block;
padding: 10px;
li {
margin-bottom: 30px;
font-size: 24px;
<h1>Halloween Ideas</h1>
<li><a href="#" target="_blank">
Mega Man</a></li>



Chapter 8: Animating Your Links to Life

Once you’ve added all of this, save your document and preview it in
the browser. If everything worked out properly, you’ll see something
that looks like this: