Learning CSS3 Animations and Transitions

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