Opis: Learning CSS3 Animations - Alexis Goldstein

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 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

Szczegóły: Learning CSS3 Animations - Alexis Goldstein

Tytuł: Learning CSS3 Animations
Autor: Alexis Goldstein
Producent: Addison Wesley Publishing Company
ISBN: 9780321839602
Rok produkcji: 2012
Ilość stron: 264
Oprawa: Miękka
Waga: 0.45 kg

Recenzje: Learning CSS3 Animations - Alexis Goldstein