Learning CSS3 Animations & Transitions

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