CSS ANIMATIONS AND TRANSITIONS - for the Modern Web STEVEN BRADLEY
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
CSS ANIMATIONS AND TRANSITIONS for the Modern Web STEVEN BRADLEY
CSS ANIMATIONS AND TRANSITIONS for the Modern Web STEVEN BRADLEY PEACHPIT PRESS
CSS Animations and Transitions for the Modern Web Steven Bradley Copyright © 2015 Steven Bradley Glicksman Adobe Press books are published by Peachpit, a division of Pearson Education. For the latest on Adobe Press books, go to www.adobepress.com. To report errors, please send a note to errata@peachpit.com. Acquisitions Editor: Victor Gavenda Development Editor: Robyn G. Thomas Production Editor: David Van Ness Technical Editors: Virginia DeBolt and Terry Noel Copyeditor: Robyn G. Thomas Proofreader: Liz Welch Compositor: Danielle Foster Indexer: Rebecca Plunkett Cover and Interior Design: Mimi Heft Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, elec- tronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the pub- lisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com. Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks Adobe, the Adobe logo, Photoshop, and Illustrator are registered trademarks of Adobe Systems Incorpo- rated in the United States and/or other countries. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of the trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout the book are used in an editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book. Printed and bound in the United States of America ISBN-13: 978-0-133-98050-9 ISBN-10: 0-133-98050-2 9 8 7 6 5 4 3 2 1
Ack nowledgments iii Acknowledgments This book is the work of many people. I’d like to thank the fine people at Adobe Press. Thank you Victor, Robyn, David, Virginia, and Terry. Many more peo- ple, who I’ll never know, have had a hand in producing this book—thank you. I’d also like to thank my family and friends for their general support and encour- agement. Thank you, Mom, Dad, David, H, and Kristine.
iv A bout th e Auth o r
About the Author
Steven Bradley is a freelance web designer and WordPress devel-
oper who traded the hustle and bustle of his origins in New York
for the blue skies and mountains of Boulder, Colorado. He’s the
author of Design Fundamentals: Elements, Attributes, & Princi-
ples, which is available as an ebook at www.vanseodesign.com/
downloads/learn-design-fundamentals.
In addition to designing and developing websites, he blogs regularly at Van-
seo Design (www.vanseodesign.com/blog) and runs a small business forum
(www.small-business-forum.net) to help freelancers and entrepreneurs get
started on their journey.
When not working, Steve can be found playing softball on a nice evening or
reading on a rainy day. He enjoys hiking the trails of Colorado’s mountains
and is curious about everything.Ta ble of Contents v
Table of Contents
Getting Started x
Chapter 1 Introduction 1
Design Layers 2
Animation 3
Transitions 5
Why Transitions and CSS Animation? 6
Browser Support/Polyfills 7
Ready to Get Started? 10
Chapter 2 Transforms 11
Browser Support and Vendor Prefixes 13
2-dimensional Transforms 14
transform-origin Property 16
2-dimensional Transform Functions 21
Nested Transforms 28
Adding Multiple Transforms to an Element 29
The Transform Rendering Model 30
3-dimensional Transforms 33
perspective Property 34
perspective-origin Property 37
transform-style() Property 39
backface-visibility() Property 43
3-dimensional Transform Functions 52
Summary 55vi Ta ble o f Co ntents
Chapter 3 Transitions 57
Browser Support 58
Transitions 59
transition-property Property 62
transition-duration Property 66
transition-timing-function Property 68
transition-delay Property 79
transition shorthand Property 81
Starting and Reversing Transitions 82
Transition Events 84
Animatable Properties 89
Animatable Property List Resources 91
Summary 92
Chapter 4 Animations 93
Browser Support 95
Detecting Browser Support 95
Finding JavaScript Libraries for Animation 95
CSS Animations 96
CSS Positioning 96
Smoothing the Animation 98
The @Keyframes Rule 101
animation-* Properties 104
animation-name Property 104
animation-duration Property 106
animation-timing-function Property 107
animation-iteration-count Property 114
animation-direction Property 119
animation-play-state Property 122Ta ble of Contents vii
animation-delay Property 125
animation-fill-mode Property 128
animation Shorthand Property 131
Animation Events 131
Types of Animation Events 132
Transition or Animation 141
Similarities 141
Differences 142
Choosing Transitions or Animations 143
Performance 143
Summary 146
Chapter 5 More Realistic Animation 147
Disney’s 12 Principles of Animation 148
Squash and Stretch 149
Anticipation 158
Staging 164
Straight-Ahead Action and Pose-to-Pose Action 168
Follow-through and Overlapping Action 168
Slow In and Slow Out (Ease In and Out) 182
Arcs 182
Secondary Action 195
Timing 196
Exaggeration 197
Solid Drawing 206
Appeal 207
Beyond the 12 Principles 208
Closing Thoughts 209viii Ta ble o f Co ntents
Chapter 6 Examples 211
How to Use the Examples 212
Navigation Bar 213
Modal Windows 224
Off-canvas Sidebar Navigation 242
Off-canvas Navigation/Sidebar: Take 1 243
Off-canvas Navigation/Sidebar: Take 2 259
Content Switcher 269
Summary 286
Chapter 7 Closing Thoughts 287
Progressive Enhancement 288
Trends 289
Next Steps 290
Thanks 290
Appendix Resources 291
Chapter 1: Introduction 292
Browser Support 292
Polyfills 292
Chapter 2: Transforms 292
Visual Formatting Model 293
Transform Matrix 293
Chapter 3: Transitions 293
Timing Functions 293
Transition Events 293
Animatable Properties 294Ta ble of Contents ix Chapter 4: Animation 294 Animation Events 294 Transitions vs. Animations 294 Performance 294 Chapter 5: More Realistic Animation 295 Disney’s 12 Principles of Animation 295 Applying Animation Principles to User Interface Design 296 Chapter 6: Examples 296 Effects 296 Index 298
x Ge t ti n g Sta rted
Getting Started
CSS continues to evolve as a language, and as it does it gives us a greater abil-
ity to create with code. Transforms, transitions, and CSS animations are good
examples of things we could create only in graphics and animation editors. The
file size of a few lines of code is measured in bytes. The size of a file containing
a moving graphic is measured in megabytes and requires an additional request
to the server. For the sake of performance, look first to doing things with code.
The recent design trend has been to remove signals of depth and other details
used to mimic realistic objects on the screen. Unfortunately, some of those
details also serve a purpose in communicating information in websites and
web apps. Motion is replacing depth as the way to communicate what’s been
removed and adding back delight in a way that’s more in tune with the fluid
and dynamic nature of the web.
This book will start you on your path to adding motion to your designs. It will
show you how to work with transforms, transitions, and CSS animations in
modern browsers, and it will show you how to make changes to CSS proper-
ties over time instead of instantly.
The basics covered in this book will help you understand how to create more
realistic animation and present some practical examples you can apply to the
websites you design and develop.
What’s Inside This Book
Animation is about showing changes over time. We’ll look at some of the
things we can change, namely CSS transforms. Transforms give us the ability
to modify things like the size and position of an element. They do this in a way
that doesn’t interrupt the document flow. In other words, when the element
changes, other elements on the page don’t react. They treat the transformed
element as though it were still in the original state.
Most changes to the elements of a website happen instantly. Mouse over a
button, and it immediately changes color. Mouse out, and the color reverts
back, again instantly. Changes that happen instantaneously aren’t very realis-
tic, which is where transitions come in. We’ll use transitions to alter the timeGetting Started xi over which these changes occur so they appear more natural. Subtle changes will add a touch of realism and not be so jarring. Transitions have a couple of limitations. First, they occur in response to some action, such as hovering over an element. We can’t initiate a transition with- out some interaction by a site visitor. Second, you have only a single starting point and a single end point. CSS animation isn’t bound by either of these limitations. You can set an ani- mation to start on its own (or in response to user action). Using keyframes, you can add as many or as few points between the beginning and end where you can make additional changes. At times, you’ll want to use transitions and at other times you’ll prefer anima- tion. I’ll mention some of these throughout the book. Once you understand how to work with transforms, transitions, and anima- tions, and have some idea when to use them in real-world projects, we’ll take a look at the real world again and think about how you can make your ani- mation more realistic. A Note About Images and Examples One limitation of print is that it’s static. We won’t be able to show actual transi- tions and animations in this book. The figures in this book show before, after, and during moments and describe the movement. However, every example presented in this book has a corresponding live exam- ple, which you can download, experiment with, and use. Each example is iden- tified by number in the text, and you can view each in action as a demo to see what’s being discussed or as a way to double-check your code. How to Download Code and Example Files Along with the examples, you’ll be able to download all the code used in this book. 1. Go to www.peachpit.com/register and create or log in to your account. 2. Enter the book’s ISBN (978-0-133-98050-9), and click Submit. 3. On the My Registered Products tab of your account, you should see this book listed.
xii Ge t ti n g Sta rted
Who Is This Book For?
We assume that you’ve picked up this book because you’re interested in learn-
ing about animating web pages. You should already know how to build web
pages and websites. You might be new to web design, or perhaps you’ve been
developing websites for years. As long as you can create an HTML document
and know how to work with CSS, you’ll be able to follow along and work
through the examples.
Knowing—or at least being able to read—JavaScript will be helpful, although
not necessary. Some of the examples in this book use JavaScript to read and
modify the CSS properties of some HTML elements. The scripts are short and
not too difficult to understand. I’ll explain each when you encounter them.
Most importantly, you should use your imagination. You can combine the
things you learn in this book in multiple ways to create a variety of effects. I
can show you only so many in one book. I’ll point you to resources for more
examples, but you’ll get the most from this book if you experiment on your
own and see what effects you can create.
How Do You Use This Book?
We designed this book to be used in a couple of ways. Naturally you should
read through the text as you would any book. The text will present new infor-
mation and help you understand it. Just as important are the examples accom-
panying the text.
You’ll get more from this (or any technical book) by typing the code in a text
editor. Open your favorite code editor or grab one from the list in the follow-
ing section. Open a few browsers (you should have as many available as pos-
sible). Then start coding and checking to see how your code works.
Type the example code, and modify it. Typing will reinforce everything you
read and will help you develop the muscle memory so you can write it on
your own. Remember to use your imagination. Modify the example code, and
observe what happens.Getting Started xiii
In code listings throughout the book, a single line of code onscreen might wrap
to two lines in the book. If this happens, the continued line will start with an
arrow, so it might look like this:
The beginning of the code starts here,
p but it continues on this line.
Code that you should type or modify or that you should pay particular atten-
tion to appears highlighted.
-webkit-transform: translateY(0px) scale(1,1);
-ms-transform: translateY(0px) scale(1,1);
transform: translateY(0px) scale(1,1);
You’ll find step-by-step instructions to show you how to complete a process.
Note that instruction appears as the numbered step, and a description follows
it, like this:
1. Add a div to your HTML with a class of ball and wrap another div with
a class of stage around it.
The reason for the .stage div is to provide a frame for the animation.
Because you and I are probably looking at browsers open to different widths
and heights, it would be hard to use the browser’s edge as the thing the ball
bounces against. By creating a stage for the ball, we can including it in the
animation and make it more likely we’re both seeing the same thing.
Each example that has a matching file containing all the code is identified in
the text:
We’ll get to those functions momentarily, but for now let’s take a look at a sim-
ple example showing a transform (Example 2.1).xiv Ge t ti n g Sta rted
Tools Required
Although tools like Adobe’s Edge Animate or Tumult’s Hype 2 can create ani-
mation for us, we won’t be using them in this book. We won’t be using Photo-
shop or Maya or any other tool that can create movement. These are all great
tools, but we’re going to create movement by writing code.
That means that the tool requirements are minimal and you should already
have everything you need. You’ll need a code editor, a modern browser, and
working knowledge of HTML and CSS. Oh, and bring your imagination.
If you build websites with any regularity, you probably have a favorite code
editor, and you’re free to use it. In the following sections, you’ll find a few you
can try if you don’t yet have a favorite or just want to try a few new ones. All
the editors listed can be downloaded and used for free.
I’ll be using Adobe Brackets (http://brackets.io). This is an Adobe book after
all, but that’s not the only reason for using it. Brackets is free and open source
under an MIT license.Getting Started xv Brackets isn’t limited to running on a single platform. It works on Windows, Mac, and Linux, so if you switch operating systems between home and work, you can still use it. It has some additional features such as live reload, so you don’t have to keep refreshing your browser to see the effect of your changes. Brackets can be extended and already has an active community building exten- sions for it. Brackets is built using the same technologies you use to develop websites. It’s built with HTML, CSS, and JavaScript, so you may not need to wait for someone else to develop an extension. You probably have all the skills needed to create it yourself. Brackets isn’t your only choice. The following sections list free editors that you can use regardless of which platform you use and some specific to an operat- ing system. Universal Brackets: http://brackets.io jEdit: www.jedit.org Komodo Edit: http://komodoide.com/komodo-edit KompoZer: http://kompozer.net Sublime Text: www.sublimetext.com (free if you don’t mind a little nagging) Aptana Studio: www.aptana.com/products/studio3 Eclipse: www.eclipse.org Emacs: www.gnu.org/software/emacs Vim: www.vim.org Bluefish: http://bluefish.openoffice.nl/index.html OS X Text Wrangler: www.barebones.com/products/textwrangler SubEthaEdit: www.codingmonkeys.de/subethaedit
xvi Ge t ti n g Sta rted
Windows
Notepad++: http://notepad-plus-plus.org
EditPad Lite: www.editpadlite.com
HTMLKit: www.chami.com/html-kit
Linux
Gedit: https://wiki.gnome.org/Apps/Gedit
Kate: http://kate-editor.orgChapter 4 ANIMATIONS CSS transitions offer you a way to create simple animations that always start as the result of triggering a CSS property change. Transitions can animate only between a start and end state, and each state is controlled by existing CSS prop- erty values. For example, a transition that runs on hover transitions between values on the element and values on the hover state of the element. Overall, transitions are a simple way to animate but offer little control over the animation. CSS animations provide a bit more control. They allow for the creation of mul- tiple keyframes (Figure 4.1) over which the animation occurs. While they can start in reaction to a change in CSS property value, they can also run on their own. An animation executes as soon as the animation property is applied.
94 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
Figure 4.1
Animation keyframes
Transitions can change only between two states.
Animations can change over many states.
Transitions don’t change property values; they define how the change occurs.
Animations can change property values inside each keyframe.
Transitions change implicitly. You define things at the start and end states, and
you leave it to the browser to determine all the intermediate states. Animations
change explicitly. The animation can define start and end states as well as some
intermediate states. The browser still determines the intermediate states between
keyframes, but the animation gets to define as many keyframes as it wants.
All the things you could change when working with transitions, you can still
change when working with animations. You determine how long the anima-
tion lasts and what timing-function to use between keyframes. You also
get to delay the animation if you like.
In addition, you can decide how many times the animation should run and
in which direction it should run. You can set the animation to be running or
paused. You can even determine which CSS property values apply outside the
time frame in which the animation runs.
Animations have other benefits over transitions as you’ll see in this chapter.
In general, these benefits are about giving you more control. Transitions have
advantages over CSS animations, too. In general, they’re about the simplicity
of transitions.Ch a pter 4 A n i m ations 95 Browser Support Browser support for CSS animations is good. It’s similar to what you saw ear- lier for transforms and transitions. CSS animations work in all modern brows- ers. In IE10 and newer, Firefox, and IE Mobile, no vendor prefixes are needed. Safari, Chrome, Opera, iOS Safari, Android Browser, and Blackberry Browser all use the -webkit vendor prefix, so you have only the one prefix to deal with. The animation-fill-mode property isn’t supported in Android below version 2.3. In iOS 6.1 and earlier, animations aren’t supported on pseudo-elements. As you probably expect by this point, the holdouts are Opera Mini and IE9 and earlier. Unfortunately, there’s no polyfill like there was for transforms and transitions. The fallback is to create the animation using JavaScript: You first check to detect CSS animation support and then use one of the available JavaScript libraries for working with animation. JavaScript animation is beyond the scope of this book, but the following sec- tion gives you to a few places where you can find more information. Detecting Browser Support Here are some resources for detecting support as well as some JavaScript ani- mation libraries: https://hacks.mozilla.org/2011/09/detecting-and-generating-css- animations-in-javascript https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ Using_CSS_animations/Detecting_CSS_animation_support Finding JavaScript Libraries for Animation The most popular library is—without doubt—jQuery, although it’s not the most performant way to create animations with JavaScript. Here are some other options: http://api.jquery.com/animate www.polymer-project.org/platform/web-animations.html https://github.com/web-animations/web-animations-js http://updates.html5rocks.com/2014/05/Web-Animations--- element-animate-is-now-in-Chrome-36
96 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
You could create animations for every browser using JavaScript and ignore
CSS animations completely. If you’re using JavaScript to create the animation
for some browsers, why not use JavaScript for all browsers and not worry so
much about CSS animation support? CSS animations are usually, though not
always, more performant than the same animation in JavaScript.
Another option, and the one I recommend, is to treat CSS animations as part
of the noncritical experience. Use animations to enhance the design and the
design’s aesthetic, but make sure nothing breaks in browsers that don’t support
CSS animations. Your site should still work in any browser that doesn’t support
animations, but it can provide a more enjoyable experience for those that can.
Note that while CSS animations work in modern browsers, you don’t neces-
sarily see the same smoothness. A smooth-running animation in one browser
might look a bit jerky in another, and it’s not always the same browsers looking
smooth or not. It depends on the browser and the specifics of the animation.
CSS Animations
As we’ve been doing throughout this book, let’s start with an example.
CSS Positioning
You’ll make a box slide across the screen from left to right in two ways. The
first way will be to use CSS positioning (Example 4.1).
1. Add a div with a class of box to your HTML.
2. Give the .box div dimensions and a background color so you can see it
on the page. Set its position to absolute. Top and left values will be 0
by default, which is fine for this example.
.box {
width: 200px;
height: 200px;
background-color: #393;
position: absolute;
}Ch a pter 4 A n i m ations 97
You need two components to create the animation. The first one declares
the animation on .box. Part of the benefit of the animation property is
the name of a keyframe where you’ll change properties, so you also need
to create this keyframe, which is the second component.
3. Add the animation property to .box.
.box {
-webkit-animation: slide 5s linear 0s 3;
animation: slide 5s linear 0s 3;
}
The first value in the list is slide, which is the name of your keyframe.
4. Create the slide keyframe.
@-webkit-keyframes slide {
from {
left:0
}
to {
left: 600px
}
}
@keyframes slide {
from {
left: 0;
}
to {
left: 600px;
}
}98 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
5. Load the file in a browser.
A green square appears in the upper-left corner of your browser. As soon
as the page loads, it moves 600 pixels to the right, jumps back to the upper-
left corner, slides to the right again, and repeats a third time before finally
returning to the upper-left corner and stopping (Figure 4.2).
Figure 4.2
animation: slide 5s linear 0s 3;
Slide animation using the
left property
Instant return
from { to {
left: 0; left: 600px;
} }
The animation itself probably wasn’t very smooth, but you’ll get to that in a
moment. Let’s talk about what the code is doing, starting with the keyframe.
The keyframe has the name slide. It includes two declarations for the left
property, once in a from state and once in a to state. In the from state, the
left value is 0, and in the to state, the value is 600px. The states from and
to represent the start and end states, so initially the .box is positioned 0 pix-
els from the left edge, and at the end of the animation cycle, it is 600 pixels
from the left edge.
To start the animation, you set the animation shorthand property on the .box div.
animation: slide 5s linear 0s 3;
The animation is calling the keyframe named slide, and it runs for a dura-
tion of 5 seconds. The timing-function is linear. There’s no delay, and the
animation is set to run three times.
Smoothing the Animation
What about the jumpiness in the animation? Let’s modify the example to move
the .box with a transform instead of changing the value of the left property
(Example 4.2). You need to adjust only the keyframe.Ch a pter 4 A n i m ations 99
1. Replace the keyframe in step 4 of Example 4.1 with the following keyframe:
@-webkit-keyframes slide {
to {
-webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}
}
@keyframes slide {
to {
-webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}
}
In this code, the translate function moves the .box div 600 pixels to
the right, the same as the left values did in the previous @keyframes
rule. Notice that only the to state is included this time. You don’t need to
include a from state. You really didn’t need it the first time either. The ini-
tial state of the .box div as set on the .box class is exactly what you want
for the from state, so there isn’t a need to explicitly set it in the keyframe.
2. Reload your page with this new keyframe.
The same thing happens as before: A green .box moves 600 pixels to the
right three times (Figure 4.3). However, this time the animation runs
smoother. We’ll get to why at the end of the chapter. For now just know
there are multiple ways to create an animation (or a transition), but the
performance of each way can vary.100 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
Figure 4.3
animation: slide 5s linear 0s 3;
Slide animation using
translate function
Instant return
from { to {
} -webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}
As you can see in the example, animations can reset CSS property values inside
their keyframes. Transitions can’t do this. Although CSS animations affect
property values while running, they don’t by default control values before the
animation starts or after it ends. By default, the intrinsic styles (styles added
directly to the element and not inside keyframes) of the element control the
values outside the time the animation is running. The styles set in the keyframe
are in control while the animation is running, but not necessarily before or
after. You do have a measure of control to change the default.
It’s possible to have multiple animations running at the same time and for each
animation to set different values on the same property. When this happens,
the animation defined last in the list of keyframe names overrides the other
animations, and the value it sets is used.
Animations can start in one of two ways:
On page load
In reaction to a CSS property change
The start time of an animation is the latter of the time when the style speci-
fying the animation changes (changing the element on hover for example) or
the time the document’s load event is fired—in other words, automatically
after the page has loaded.Ch a pter 4 A n i m ations 101
The @Keyframes Rule
Keyframes are the different states of the element being animated. They’re used
to specify different values for the properties being animated at various points
during the animation. A series of keyframes defines the behavior for one cycle
through the animation. Remember animations can repeat multiple times.
You define keyframes inside the @keyframes rule.
@keyframes identifier {
List of properties and values
}
An @keyframes rule begins with the @keyframes keyword followed by an
identifier (the keyframe name). Inside the brackets is a list of CSS properties
and values to set the style for the specific states.
Inside each @keyframes rule is a list of percent values or the keywords to and
from. The keyword from is equivalent to 0%, and the keyword to is equivalent
to 100%. When using a percent, the % sign needs to be included. 0 and 100
are invalid values; 0% and 100% are the correct values.
@Keyframes slide {
0% {
left: 0;
}
20% {
left: 100px;
}
40% {
left: 200px;
}102 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
60% {
left: 300px;
}
80% {
left: 400px;
}
100% {
left: 500px;
}
}
This @keyframes rule could also be written as
@Keyframes slide {
from {
left: 0;
}
20% {
left: 100px;
}
40% {
left: 200px;
}
60% {
left: 300px;
}Ch a pter 4 A n i m ations 103
80% {
left: 400px;
}
to {
left: 500px;
}
}
Each keyframe selector specifies the percentage of the animation’s duration Note
that the specific keyframe represents. The keyframe state is specified by the I’m using the words
group of properties and values declared on the selector. “keyframe” and
“keyframes” in ways that
If you don’t set a keyframe at 0% (or from), then the browser constructs a 0% might be confusing.
state using the intrinsic values of the properties being animated. Similarly if Each percentage value
no 100% (or to) keyframe is set, the browser constructs the state from intrin- represents a new
keyframe or state with
sic values. Negative percent values or values greater than 100% are ignored.
its own CSS property
Keyframes containing properties that aren’t animatable or contain invalid values. Together the
properties are ignored. properties and values in
each keyframe make up
@keyframes rules don’t cascade. A single animation will never use keyframes a keyframe declaration
from more than one @keyframes rule. When multiple @keyframes have been block. The @keyframes
rule is the special
specified on the animation-name property, the last one in the list (ordered by
@ rule that contains all
time) with a matching @keyframes rule controls the animation. the different keyframes
(states) that an animation
It’s valid for an @keyframes rule to be empty, and because of this it can be
runs through.
used to hide keyframes previously defined. The empty @keyframes rule should
come later in your CSS to override any @keyframes rule with the same iden-
tifier that appears earlier in your CSS.
1. Add the following after the @keyframes rules you set in Example 4.1.
@-webkit-keyframes slide {
}
@keyframes slide {
}104 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
2. Reload your webpage. The animation should no longer run, since an empty
@keyframes rule is called.
3. Remove the empty @keyframes rule or place it before the nonempty
@keyframes rule, and the animation will run again.
animation-* Properties
CSS animations offer eight different properties for controlling an animation.
Some are comparable to similarly named transition-* properties, and some
will be new.
animation-name Property
The animation-name property defines a comma-separated list of animations
to apply to the given selector. It’s similar to the transition-property in that
it ultimately defines the properties that are animated. With the transition-
property, those properties are explicitly named. With the animation-name,
an @keyframes rule is explicitly named, and that rule contains the properties
that will be animated.
-webkit-animation-name: slide, drop;
animation-name: slide, drop;
Each animation-name in the list should match a specific @keyframes rule.
@-webkit-keyframes slide {
properties: values;
}
@keyframes slide {
properties: values;
}Ch a pter 4 A n i m ations 105
@-webkit-keyframes drop {
properties: values;
}
@keyframes drop {
properties: values;
}
If there’s no match in keyframe name (identifier), the animation won’t run. In
addition to the identifier of an @keyframes rule, a value of none is also valid.
When the none keyword value is used, no animation runs. You can use none
to override an animation that’s inherited from a parent element.
-webkit-animation-name: none;
animation-name: none;
@keyframes change the value of CSS properties. If multiple animations try
to change the value of the same property on an element, the animation clos-
est to the last name in the animation-name list controls the property values.
If multiple animation-names are listed and one is removed, it stops running,
but the other listed animations continue.
Every listed animation-name should have a corresponding value for any oth-
er animation-* properties. If there are too many values in an animation-*
property, any leftover values are ignored. If there aren’t enough values, the list
of values will be repeated until there are enough to match.
Animations are applied to elements with an animation-name value that match-
es the name of an @keyframes rule. Once applied, the animation runs. It runs
once the page loads unless it’s been applied to a trigger, such as :hover. Once
started, an animation continues to run until it finishes or the animation-name
value is removed, such as removing the :hover on the animating element.
An animation ends based on some combination of the animation-duration,
animation-iteration-count, and animation-fill mode properties. You
can also end an animation by setting the animated element’s display prop-
erty to none. This also ends any animations running on descendant elements.106 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
Note Changing the value of an animation element’s display property to something
When an animation-
other than none immediately starts that animation. It also starts any animations
name is added to the applied to descendants of the parent element. Changing the value of display
:hover state of an is one more way you can turn on and off an animation.
element, removing the
hover also removes the The values in each keyframe in an @keyframes rule are held as a snapshot
animation-name, and when the animation starts. Changing the intrinsic property on an element
the animation stops.
with an animation running has no effect. The values in the animation are in
control until the animation stops.
animation-duration Property
The animation-duration property defines how long an animation lasts
during one cycle of the animation. It’s similar to the transition-duration
property and takes a time value in seconds (s) or milliseconds (ms).
-webkit-animation-duration: 10s;
animation-duration: 10s;
Like transition-duration, the default value is 0s, which is why elements
don’t animate automatically even when they’re animatable. Technically, they
are animating, but everything happens in an instant.
Note that animation-duration is the length of one full cycle of the animation.
It’s not the length of each keyframe in the @keyframes rule. For example, if you
set an animation-duration of 10s and have the following @keyframes rule
@Keyframes duration {
0% {
property: value;
}
50% {
property: value;
}Ch a pter 4 A n i m ations 107
100% {
property: value;
}
}
the animation will take 10 seconds to get from 0 percent to 100 percent, and
not 10 seconds to go from 0 percent to 50 percent and then 10 seconds more
from 50 percent to 100 percent.
Similarly, when an animation is set to loop multiple times, the animation-
duration is the time it takes to complete one loop or cycle.
animation-timing-function Property
The animation-timing-function property describes an acceleration curve
for each keyframe in a single animation cycle. It’s similar to the transition-
timing-function. You can use any of the keyword timing functions or cre-
ate one of your own.
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps();
animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier();
Note that the animation-timing-function applies between keyframes and
not over the entire animation cycle. This means if you have keyframes at 0%,
50%, and 100% and an animation-timing-function of ease-in, the ani-
mation eases into each of the three keyframes in the @keyframes rule and
not just once at the beginning of the animation.108 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
Let’s try an example to see this more clearly (Example 4.3).
1. Add a div with a class of box to your HTML.
2. Give the .box class dimensions and a background-color.
.box {
width: 200px;
height: 200px;
background-color: #393;
}
3. Add an animation to the .box div using the individual animation-*
properties.
.box {
-webkit-animation-name: slide;
animation-name: slide;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
4. Finally add an @keyframes rule to your CSS.
@-webkit-keyframes slide {
0% {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}Ch a pter 4 A n i m ations 109
25% {
-webkit-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate(150px, 0px);
}
50% {
-webkit-transform: translate(300px, 0px);
-ms-transform: translate(300px, 0px);
transform: translate(300px, 0px);
}
75% {
-webkit-transform: translate(450px, 0px);
-ms-transform: translate(450px, 0px);
transform: translate(450px, 0px);
}
100% {
-webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}
}
@keyframes slide {
0% {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);110 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
transform: translate(0px, 0px);
}
25% {
-webkit-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate(150px, 0px);
}
50% {
-webkit-transform: translate(300px, 0px);
-ms-transform: translate(300px, 0px);
transform: translate(300px, 0px);
}
75% {
-webkit-transform: translate(450px, 0px);
-ms-transform: translate(450px, 0px);
transform: translate(450px, 0px);
}
100% {
-webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}
}
This code adds five keyframes to the @keyframes rule. This should make
it easier to see that the ease-in timing function is running between each
keyframe and not once over the entire animation cycle.Ch a pter 4 A n i m ations 111
5. Load your page in a browser, and observe the timing curve between key-
frames (Figure 4.4).
Figure 4.4
Animation timing functions
0% 25% 50% 75% 100%
Setting the ease-in timing function universally on all keyframes
You can override the timing function inside each of the keyframes. When a
timing function is applied inside a keyframe, it’s instructing the animation
to use that function moving from the keyframe with the timing function
applied to the next one (Example 4.4).
6. Replace your @keyframes slide rule from Example 4.3 with the follow-
ing rule. Changes in the code are highlighted.
@-webkit-keyframes slide {
0% {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
25% {
-webkit-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate(150px, 0px);112 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
50% {
-webkit-transform: translate(300px, 0px);
-ms-transform: translate(300px, 0px);
transform: translate(300px, 0px);
}
75% {
-webkit-transform: translate(450px, 0px);
-ms-transform: translate(450px, 0px);
transform: translate(450px, 0px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
-webkit-transform: translate(100px, 0px);
-ms-transform: translate(100px, 0px);
transform: translate(100px, 0px);
}
}
@keyframes slide {
0% {
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}Ch a pter 4 A n i m ations 113
25% {
-webkit-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate(150px, 0px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
50% {
-webkit-transform: translate(300px, 0px);
-ms-transform: translate(300px, 0px);
transform: translate(300px, 0px);
}
75% {
-webkit-transform: translate(450px, 0px);
-ms-transform: translate(450px, 0px);
transform: translate(450px, 0px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
-webkit-transform: translate(100px, 0px);
-ms-transform: translate(100px, 0px);
transform: translate(100px, 0px);
}
}
In this code, you override the ease-in timing function on two of the
keyframes.114 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
7. Reload your page, and observe the difference in the acceleration curve
between keyframes (Figure 4.5).
Figure 4.5
Animation timing functions
on keyframes
0% 25% 50% 75% 100%
Ease-in Linear Ease-in Linear Ease-in
Each keyframe can be assigned its own timing function.
The way timing functions work over keyframes and the ability to override them
on a specific keyframe is powerful and perhaps a bit scary. You have great con-
trol over how your animation accelerates, but you also have the responsibility
to exercise that control. Having an animation ease in between every keyframe
is probably not what you want.
animation-iteration-count Property
Transitions run once when triggered and run once in reverse when the trigger
is removed. Animations can run as many times as you want. The animation-
iteration-count property defines how many times an animation runs, and
it takes as a value any number or the keyword infinite. The latter sets your
animation to run in an endless loop.
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;Ch a pter 4 A n i m ations 115
You’ve already seen the animation-iteration-count in action in Exam-
ple 4.1, although that example used the animation shorthand to set all the val-
ues. Because you might be getting tired of sliding boxes and because the rest
of the examples in this chapter are variations of that same sliding box, let’s do
something different here (Example 4.5).
1. Start by adding a div with a class of box to your HTML.
2. Instead of giving dimensions and a background-color to the .box div,
set the dimensions to 0px, and add a border with different colors for each
side. Finally, give the border a radius of 50%.
.box {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;;
border-color: #393 #933 #399 #993;
border-radius: 50%;
}
3. Load your page.
A circle appears with four pie wedges, each a different color.
4. Add the following animation-* properties to .box. Note that you’ll be
rotating the .box div this time instead of moving it.
.box {
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;116 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
}
5. Create the rotate @keyframes rules to rotate the .box div.
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}Ch a pter 4 A n i m ations 117
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}118 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
75% {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
6. Load your code in a browser.
The circular .box div rotates around its center.
If you followed the colors in the example for the borders, the green wedge
should start at the top. Each time the green wedge is back at the top is one
Figure 4.6 iteration or one animation cycle (Figure 4.6).
Animation iteration count
One iteration of an animation
0% { 50% { 100% {
transform: rotate(0deg); transform: rotate(180deg); transform: rotate(360deg);
} } }
25% { 75% {
transform: rotate(90deg); transform: rotate(270deg);
} }Ch a pter 4 A n i m ations 119
animation-direction Property
Another new property is the animation-direction property, which defines
whether an animation runs forward or in reverse on some or all of its cycles.
The animation-direction property takes one of four values:
normal specifies that all iterations of the animation are played as specified.
reverse specifies that all iterations of the animation are played in the
reverse direction as specified.
alternate causes the cycles to alternate between normal and reverse
with normal for the first cycle and all odd iteration counts. Even counts
are reversed.
alternate-reverse causes the cycles to alternate between normal and
reverse with reverse for the first cycle and all odd iteration counts. Even
counts are normal.
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
When the animation plays in reverse, the timing functions also run in reverse—
for example, ease-in runs as ease-out.
Until now, the sliding box you’ve been working with slides to the right and
then instantly returns to its initial location. The jump is more than a little jar-
ring. The alternate and alternate-reverse values can remove the jump.
Instead, the box continues to slide right and left until the animation stops.
Let’s go back to the sliding .box div you’ve used through most of this chap-
ter (Example 4.6).
1. Start by adding a div with a class of box to your HTML.120 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
2. Give the .box div dimensions and a background color.
.box {
width: 200px;
height: 200px;
background-color: #393;
}
3. Add the animation-* properties to .box. Additions to the code are
highlighted.
.box {
-webkit-animation-name: slide;
animation-name: slide;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
Notice the reverse direction.Ch a pter 4 A n i m ations 121
4. Create the slide keyframe.
@-webkit-keyframes slide {
to {
-webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}
}
@keyframes slide {
to {
-webkit-transform: translate(600px, 0px);
-ms-transform: translate(600px, 0px);
transform: translate(600px, 0px);
}
}
5. Load your page.
First it jumps 600 pixels to the right (so fast that you might not see the .box
on the left before the jump), and then it slides back to its initial location
and repeats the sequence three times.
6. Change the value for the animation-direction in step 3 to alternate
(Example 4.7).
-webkit-animation-direction: alternate;
animation-direction: alternate;
7. Reload your page, and observe the difference (Figure 4.7).
Now the .box div slides back and forth between the initial and ending
states. This makes for a much smoother overall animation. Experiment with
the normal and alternate-reverse values.122 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
Figure 4.7
Animation direction
Iteration 1 runs normally.
Iteration 2 alternates and runs in the reverse direction.
Iteration 3 alternates again to run in the normal direction.
When the animation completes
the .box div jumps instantly
to its initial location.
animation-play-state Property
By default, your animations run as soon as the animation-name property is
assigned. You can change that behavior with the animation-play-state
property, which defines whether an animation is running or paused.
-webkit-animation-play-state: running;
animation-play-state: running;
-webkit-animation-play-state: paused;
animation-play-state: paused;
The default value, as you would likely guess, is running. If you change the
value to paused, the animation stops where it is until the animation-play-
state is changed again to running. When paused, the animation displays
whatever state the animation was in at that moment. When the animation is
resumed, it restarts from the state it was paused in.Ch a pter 4 A n i m ations 123
Let’s make one addition to Example 4.7 (Example 4.8).
1. Add the animation-play-state property to the .box div from the pre-
vious example. Additions to the code are highlighted.
.box {
-webkit-animation-name: slide;
animation-name: slide;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
2. Reload your page.
Unlike previous examples, this time the animation doesn’t run when the page
is finished loading. To run the animation, you need to change animation-
play-state to running and reload the page.
This isn’t particularly useful if you have to reload the page after changing
the animation-play-state property, but it becomes much more useful
when changing properties via JavaScript or some other trigger.
Let’s modify the example to add triggers.124 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
3. Modify your HTML to include play and pause buttons.
Play
Pause
The buttons get ids so your JavaScript code has something to hook into.
Notice that the code adds an id of box to the .box div.
The buttons need some styling.
4. Add the following to your CSS:
button {
padding: 0.5em 1em;
border: 1px solid #999;
border-radius: 5%;
margin-top: 3em;
}
Nothing special. Just a little style to make your buttons look “buttony.” Now
let’s add some JavaScript so the buttons do something.
5. Add the following code in the head of your document between
tags.
var init = function() {
var box = document.getElementById('box');
var play = document.getElementById('play');
var pause = document.getElementById('pause');Ch a pter 4 A n i m ations 125
document.getElementById('play').addEventListener(
p 'click', function(){
box.style.webkitAnimationPlayState = "running";
box.style.animationPlayState = "running";
}, false);
document.getElementById('pause').addEventListener(
p 'click', function(){
box.style.webkitAnimationPlayState = "paused";
box.style.animationPlayState = "paused";
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
Hopefully, the script looks somewhat familiar. The last line of code listens
for the page to load and then calls the init function.
Inside the function, you first get hooks to each button and the .box div and
set them to appropriately named variables. Next you add event listeners to each
button, and if a button is clicked, you set the value of animationPlayState
to either running or paused, depending on which button was clicked.
6. Reload your page one more time.
You should see the new play and pause buttons. The green box sits in the
top-left corner until you click the Play button to start the animation. Once
the box begins moving, you can click the Pause button to stop the anima-
tion. Clicking Play starts the animation again from the point at which it
was stopped.
animation-delay Property
The animation-delay property defines when an animation starts. It works
the same way the transition-delay property works. Like transition-
delay, values are in units of time and can be positive, 0, or negative.126 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
A positive value delays the animation until some point in the future. A value
of 0 (the default) starts the animation instantly. A negative value appears to
start the animation in the past. It starts instantly, but at a point in the middle
of the animation. The delay works as an offset.
Let’s continue to build on Example 4.8.
1. Add an animation-delay to the .box div. Additions to the code are
highlighted (Example 4.9).
.box {
-webkit-animation-name: slide;
animation-name: slide;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-direction: alternate;
animation-direction: alternate;Ch a pter 4 A n i m ations 127
-webkit-animation-play-state: running;
animation-play-state: running;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
2. Reload your page.
The animation does nothing for 2 seconds and then slides back and forth like
before (Figure 4.8). Try using some negative values, and observe the difference.
Figure 4.8
0px 200px 400px 600px
0s Animation delay
2s delay
1s
Begin animation
2s
3s
4s
5s128 C SS A N I M ATIO N S A N D TR A N SITIO N S FO R TH E MO DER N W EB
animation-fill-mode Property
You probably had an idea what each animation-* property did before I told
you. Some were familiar after working through transitions, and the property
names give a pretty good clue about what the others do.
The animation-fill-mode property is probably not intuitive to you. You
might be thinking about background colors filling your element or something
like that. The animation-fill-mode property actually defines what values
are applied by an animation outside of its execution time.
By default, an animation affects property values only while it’s running. This
is why the example animations you’ve been working with often jump back to
the initial state when the animation stops. Whatever values are set in each key-
frame are the ones used for a property until either the next keyframe changes
it or the animation stops playing. When the animation stops, the CSS property
values are whatever values were set intrinsically on the element.
The animation-fill-mode property overrides this behavior. It takes four
keyword values.
animation-fill-mode: none | forwards | backwards | both
none is the default, and it doesn’t apply any property values in the anima-
tion outside the animation’s execution.
backwards applies the property values defined in the first keyframe that
starts the first iteration to the period defined by animation-delay. The
values come from either the 0% (from) or 100% (to) keyframes, depend-
ing on the value of the animation-direction property.
forwards applies the property values after the animation stops. If the
animation-iteration-count value is greater than 0, the values applied
are those at the end of the last completed iteration. If the count value equals
0, the values applied are those that start the first iteration.
both does what you might expect and applies both the forwards and
backwards values to the animation-fill-mode property.You can also read
