For web developers building rich web and mobile applications, standards-based CSS3 offers powerful advantages over traditional Flash-based approaches - and since Apple's immensely popular iPad and iPhone don't support Flash, moving to CSS3 has become even more urgent. However, most CSS3 guides focus primarily on the basics, frustrating web developers who want to do sophisticated work. Learning CSS3 Animations and Transitions is the first book focused entirely on creating production-quality rich animations and transitions with CSS3. Leading web development trainer Alexis Goldstein covers everything web developers need to know, teaching through solid examples that help web professionals build their skills one step at a time. Readers will learn how to: * Create 2D transforms that serve as the foundation for CSS3 animations * Use transitions to make changes come alive * Master essential keyframing techniques * Combine transitions, transforms, and parallax scrolling in immersive web experiences * Transform in 3D, and animate 3D transforms * Creating increasingly complex and Flash-style animations * Build powerfully effective interactive infographics with CSS3 and HTML5 * And much more...

Table of Contents:
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