Get Started Fast with Professional-Quality CSS3 Animation!

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