Learning CSS3 Animations and Transitions

Alexis Goldstein first taught herself HTML while a high school student in the mid-1990s and went on to get a bachelor’s degree in computer science from Columbia University. Alexis previously co-authored the book HTML5 & CSS3 for the Real World with Louis Lazaris and Estelle Weyl. Alexis began her career with a seven-year stint in technology on Wall Street, where she worked in both the cash equity and equity derivative spaces at three major firms and learned to love daily code reviews. Alexis now runs a software development and training company, aut faciam LLC. She also teaches with Girl Develop It in New York, a group that conducts low-cost programming classes for women, and is a member of NYC Resistor in Brooklyn. In her spare time, you can find Alexis organizing with affinity groups of Occupy Wall Street in New York City.

Table of Contents
1. Working with CSS3 Animations   1
Intro to CSS3 Animations   1
Summary of CSS3 Animation Tools   2
  HTML5 Boilerplate   2
  Tools for Generating Vendor Prefixes   2
  -prefix-free   4
  Tools for Reviewing Browser Support   5
The Modernizr Library   5
  Leveraging the Modernizr Library   6
  CSS Fallbacks via Modernizr   7
  The Default Message for Unsupported Browsers   7
  Repeated CSS Property Definitions   11
Hardware Acceleration   11
  Viewing Hardware-Accelerated Layers in Chrome   12
  Viewing Hardware-Accelerated Layers in Safari   12
A Final Word on Working with CSS3 Animations   13
2. Building a Foundation with Transforms   15
Introducing Transforms   15
  Browser Support for transform   16
  The transform Syntax   16
Transform Functions   17
  The Effect of Transform Functions on Surrounding Elements   17
  rotate   18
  scale   22
  skew   23
t  ranslate   25
  Adding a Fallback Message for Older Browsers   26
  matrix   28
Building a Bicycle in CSS3   29
  Laying Out the Basic Skeleton   29
  Creating Bicycle Wheels with border-radius   31
  Drawing the Spokes   32
  Drawing the Frame   36
  Finishing the Bike with a Seat and Handlebars   39
  Adding a Fallback Message for Older Browsers   44
Summary   45
Challenge   46
3. Animating Elements with Transitions   47
Introduction to Transitions   47
  Browser Support for transition   47
  Creating a Simple Transition   48
  The transition Shorthand Property   49
Triggering a Transition Animation with Hover Events   49
  Transitioning Changes to the Background Color   49
  Transitioning Changes to transform Values on Hover   51
Triggering a Transition Animation with Click Events   51
  Triggering the background-color Transition in a Mobile Environment   52
  Triggering the translateX Transition in a Mobile Environment   53
Transition Properties   54
  transition-property   54
  transition-duration   55
  transition-timing-function   56
  transition-delay   56
Spinning the Bike Wheels   57
Animating the Bike to Move Across the Screen   59
  Spinning the Wheels as the Bike Moves   60
  Triggering the Animation   60
Summary   61
Challenge   61
4. Keyframe Animations   63
Introduction to Keyframe Animations   63
  Browser Support for Keyframe Animations   63
  Creating a Basic Keyframe   64
  The Components of a Keyframe   65
  Setting animation Properties   66
  Using Percentages in Keyframe Selectors   67
Controlling a Keyframe Animation with Properties   70
  animation-fill-mode   70
  animation-iteration-count   72
  animation-direction   73
  animation-delay   74
  animation-play-state   74
  The animation Shorthand Property   75
Animating a Recoiling Spring   76
  Creating the Keyframes for the Spring’s Compress and Recoil   77
  Controlling the Animation’s Playback   79
  Adding Additional Compress and Recoil Keyframes   79
Animating a Floating Balloon   81
  Applying Multiple Keyframe Animations to a Single Element   82
  Adding a Fallback Message for Older Browsers   84
Summary   86
Challenge   86
5. Creating 3D Effects with Parallax Scrolling   89
Introduction to Parallax Scrolling   89
A Three-Layer Parallax Scrolling Animation   89
  Creating the Background   90
  Animating the Midground Sprite   93
  Animating a Foreground Sprite   95
Animating Several Scenes with Parallax Scrolling   96
The Animation’s Layout and Basic Styles   97
  The Animation’s Core HTML   97
  Base Styles for the Page   98
Scene 1: Creating a Skateboarding Robot   100
  The Background for Scene 1   100
  Styling Scene 1’s Sprites   101
  Moving Scene 1’s Elements Across the Screen   102
  Triggering the Transitions via JavaScript   103
Scene 2: Moving Between Landscapes   106
  Scene 2’s HTML and CSS   107
  Scene 2’s JavaScript   107
Scene 3: Making the Robot Walk   108
  Scene 3’s HTML and CSS   108
  Scene 3’s JavaScript   110
Summary   111
Challenge   112
6. Adding Depth with 3D Transforms   113
Introduction to 3D Transforms   113
  3D Transform Properties   113
  Defining Transforms on All Three Axes   115
  Browser Support for 3D Transforms    116
Drawing a 3D Cube   116
  Creating a Containing Element for the Scene   117
  Rendering Nested Elements in 3D Space   118
  Rotating the Faces of the Cube   119
  Changing Depth with translateZ   121
  Changing the Camera Angle with perspective-origin   125
Creating a House of Cards   126
  Styling the Containing Element for the House of Cards   127
  Positioning and Styling the Cards    127
  Transforming the Cards   129
  Adjusting the Ordering of the Stacked Cards   130
  Adding a Pattern to the Card Backs   132
Summary   134
Challenge   134
7. Animating 2D and 3D Transforms   135
Basic 3D Transform Animations with Transitions   135
  Adding HTML5 Sliders to Control Rotation   136
  Rotating a 3D Object as the Slider Changes   137
  Adding Basic Styles   139
Optimizing Performance   140
  Using Transitions Instead of Keyframe Animations to Improve Performance   140
  Leveraging Hardware Acceleration with translate3d and translateZ   141
Blowing in the Wind: Animating Dandelion Seeds   141
  The Base HTML   142
  Animating the Stem Blowing in a Gust of Wind   144
  Placing and Animating the Seeds   145
  Adding More Seeds   149
  Animating Groups of Seeds   153
Summary   156
Challenge   156
8. Using Transitions and Transforms to Animate Text   157
Introduction to the Typewriter Example   157
The Animation’s Layout and Basic Styles   158
  The Animation’s Core HTML   159
  Using a Custom Font with @font-face   160
  Styling the Typewriter Roller and Paper Elements   161
Scene 1: Making the Quote Rise Up the Screen   162
  Using Keyframe Animations to Move the Quote Upward   163
  Chaining Together Multiple Keyframe Animations   164
  Using JavaScript to Trigger the Animation   165
  Revealing the Letters One at a Time with JavaScript and Keyframe Animations   165
  Determining the Post-Typing Timing   169
Scene 2: Making Text Fall   171
  Animating Falling Words   171
  Triggering Scene 2’s Animation   173
Scene 3: Scrolling Text   173
Scene 4: Growing Text   175
Scene 5: Continuing the Animation   177
  Moving the Second Part of the Quote Upward   178
  Repeating the Turn of the Roller   178
  Setting Up the Timing for the Rest of the Animation   179
Summary   180
Challenge   180
9. Building Flash-Style Animations with Keyframe Animations   181
Introduction to the Meow Street Fat Cat Animation   181
  The Animation’s Layout and Basic Styles   182
  The Basic HTML Elements for the Animation   183
  The Basic Elements and Styling for Morgan the Cat   184
  Setting Up Morgan’s Newspaper   186
  Staggering the Scenes of the Animation with JavaScript   187
Scene 1: Moving the Newspaper   188
Scene 2: Reading the Newspaper   189
  Combining Animations on Two Separate Elements   189
  The Effect of Transforms on the Stacking Context and Containing Block   190
Scene 3: Moving to and Reading Page 2   191
Scene 4: Moving the Animation Outside   193
  Zooming Out to a Larger Scene   193
  Shrinking Morgan Down as You Zoom Out   194
Scene 5: Adding Murphy, the Toughest Cat Cop on the Beat   196
  HTML and Styling for Murphy the Police Cat   196
  Using transform-origin to Align Pieces of Murphy   196
Scene 6: Knocking on Morgan’s Door   197
Scene 7: Animating a Spinning Newspaper   200
  Hiding the Previous Scenes   200
  Styling the Final Scene’s Newspaper   201
  Spinning the Newspaper and Scaling It Up   202
  Avoiding Pixelation by Scaling the Newspaper Down Initially   203
Support for Opera 12   203
  Defining Two Selectors for Each 3D Scene   203
  Applying Further Fallbacks for Opera 12   204
Summary   206
Challenge   206
10. Creating Animated Infographics   207
What Are Infographics?   207
  Image-Based Infographics   207
  CSS3-Driven Infographics   208
Visualizing Data for Mixed Drinks   209
  The Base HTML for the Infographic   210
  Creating the Base Page Styles   210
  Base HTML for the First Drink Graphic   212
  Default Drink Styles   213
  Styling the Initial Ingredient   215
  Animating the Ingredients Being Poured In   217
  Styling the Remaining Ingredient   218
  Fading in the Ingredients Labels   218
  Adding a Second Drink   219
  Adding the Remaining Drinks   222
  Citing Data Sources   222
  Supporting Older Browsers with Modernizr   223
Summary   224
Challenge   224
11. Building Interactive Infographics   225
Creating an Element to Hold the Drink Recipes   225
  Styling the Drink Recipes   226
  Hiding the Ingredients by Default   227
Unveiling the Recipe Page   228
  Sliding in the Recipe Page   228
  Making the Recipe Visible When the User Clicks a Drink   229
  Determining the Recipe for the Selected Drink   230
  Hiding an Old Recipe When a New Drink Is Clicked   232
  Adjusting the recipes Element Placement for the Second Row of Drinks   232
  Fading in the Recipe Text   233
Highlighting the Selected Ingredient   234
  Animating Changes to the Selected Ingredient   234
  Triggering the Ingredient Highlight via jQuery   235
  Ensuring Compatibility in Older Browsers   236
  Changing the Cursor   237
Summary   238
Challenge   238
Index   239