- ホーム
- > 洋書
- > 英文書
- > Internet / Web Programming
Full Description
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...
Contents
Table of Contents1. Working with CSS3 Animations 1Intro to CSS3 Animations 1Summary of CSS3 Animation Tools 2 HTML5 Boilerplate 2 Tools for Generating Vendor Prefixes 2 -prefix-free 4 Tools for Reviewing Browser Support 5The Modernizr Library 5 Leveraging the Modernizr Library 6 CSS Fallbacks via Modernizr 7 The Default Message for Unsupported Browsers 7 Repeated CSS Property Definitions 11Hardware Acceleration 11 Viewing Hardware-Accelerated Layers in Chrome 12 Viewing Hardware-Accelerated Layers in Safari 12A Final Word on Working with CSS3 Animations 132. Building a Foundation with Transforms 15Introducing Transforms 15 Browser Support for transform 16 The transform Syntax 16Transform Functions 17 The Effect of Transform Functions on Surrounding Elements 17 rotate 18 scale 22 skew 23t ranslate 25 Adding a Fallback Message for Older Browsers 26 matrix 28Building 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 44Summary 45Challenge 463. Animating Elements with Transitions 47Introduction to Transitions 47 Browser Support for transition 47 Creating a Simple Transition 48 The transition Shorthand Property 49Triggering a Transition Animation with Hover Events 49 Transitioning Changes to the Background Color 49 Transitioning Changes to transform Values on Hover 51Triggering 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 53Transition Properties 54 transition-property 54 transition-duration 55 transition-timing-function 56 transition-delay 56Spinning the Bike Wheels 57Animating the Bike to Move Across the Screen 59 Spinning the Wheels as the Bike Moves 60 Triggering the Animation 60Summary 61Challenge 614. Keyframe Animations 63Introduction 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 67Controlling 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 75Animating 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 79Animating a Floating Balloon 81 Applying Multiple Keyframe Animations to a Single Element 82 Adding 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 89 Creating the Background 90 Animating the Midground Sprite 93 Animating a Foreground Sprite 95Animating Several Scenes with Parallax Scrolling 96The Animation's Layout and Basic Styles 97 The Animation's Core HTML 97 Base Styles for the Page 98Scene 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 103Scene 2: Moving Between Landscapes 106 Scene 2's HTML and CSS 107 Scene 2's JavaScript 107Scene 3: Making the Robot Walk 108 Scene 3's HTML and CSS 108 Scene 3's JavaScript 110Summary 111Challenge 1126. Adding Depth with 3D Transforms 113Introduction to 3D Transforms 113 3D Transform Properties 113 Defining Transforms on All Three Axes 115 Browser Support for 3D Transforms 116Drawing 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 125Creating 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 132Summary 134Challenge 1347. Animating 2D and 3D Transforms 135Basic 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 139Optimizing Performance 140 Using Transitions Instead of Keyframe Animations to Improve Performance 140 Leveraging Hardware Acceleration with translate3d and translateZ 141Blowing 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 153Summary 156Challenge 1568. Using Transitions and Transforms to Animate Text 157Introduction to the Typewriter Example 157The 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 161Scene 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 169Scene 2: Making Text Fall 171 Animating Falling Words 171 Triggering Scene 2's Animation 173Scene 3: Scrolling Text 173Scene 4: Growing Text 175Scene 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 179Summary 180Challenge 1809. Building Flash-Style Animations with Keyframe Animations 181Introduction 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 187Scene 1: Moving the Newspaper 188Scene 2: Reading the Newspaper 189 Combining Animations on Two Separate Elements 189 The Effect of Transforms on the Stacking Context and Containing Block 190Scene 3: Moving to and Reading Page 2 191Scene 4: Moving the Animation Outside 193 Zooming Out to a Larger Scene 193 Shrinking Morgan Down as You Zoom Out 194Scene 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 196Scene 6: Knocking on Morgan's Door 197Scene 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 203Support for Opera 12 203 Defining Two Selectors for Each 3D Scene 203 Applying Further Fallbacks for Opera 12 204Summary 206Challenge 20610. Creating Animated Infographics 207What Are Infographics? 207 Image-Based Infographics 207 CSS3-Driven Infographics 208Visualizing 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 223Summary 224Challenge 22411. Building Interactive Infographics 225Creating an Element to Hold the Drink Recipes 225 Styling the Drink Recipes 226 Hiding the Ingredients by Default 227Unveiling 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 233Highlighting 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 237Summary 238Challenge 238Index 239
