Learning CSS3 Animations and Transitions, Video-Enhanced Edition · A Hands-On Guide to Animating in CSS3 With Transforms, Transitions, Keyframes, and JavaScript (Fahad Batla's Library) by Goldstein, Alexis -- Read -- Imperial Library of Trantor

Index

About This eBook Title Page Copyright Page Dedication Page Contents at a Glance Table of Contents Preface

Who This Book Is For Who This Book Isn’t For How This Book Is Organized Chapter 1, “Working with CSS3 Animations” Chapter 2, “Building a Foundation with Transforms” Chapter 3, “Animating Elements with Transitions” Chapter 4, “Keyframe Animations” Chapter 5, “Creating 3D Effects with Parallax Scrolling” Chapter 6, “Adding Depth with 3D Transforms” Chapter 7, “Animating 2D and 3D Transforms” Chapter 8, “Using Transitions and Transforms to Animate Text” Chapter 9, “Building Flash-Style Animations with Keyframe Animations” Chapter 10, “Creating Animated Infographics” Chapter 11, “Building Interactive Infographics” About the Sample Code

Acknowledgments About the Author 1. Working with CSS3 Animations

Intro to CSS3 Animations Summary of CSS3 Animation Tools The Modernizr Library Hardware Acceleration A Final Word on Working with CSS3 Animations

2. Building a Foundation with Transforms

Introducing Transforms Transform Functions Building a Bicycle in CSS3 Summary Challenge

3. Animating Elements with Transitions

Introduction to Transitions Triggering a Transition Animation with Hover Events Triggering a Transition Animation with Click Events Transition Properties Spinning the Bike Wheels Animating the Bike to Move Across the Screen Summary Challenge

4. Keyframe Animations

Introduction to Keyframe Animations Controlling a Keyframe Animation with Properties Animating a Recoiling Spring Animating a Floating Balloon Summary Challenge

5. Creating 3D Effects with Parallax Scrolling

Introduction to Parallax Scrolling A Three-Layer Parallax Scrolling Animation Animating Several Scenes with Parallax Scrolling The Animation’s Layout and Basic Styles Scene 1: Creating a Skateboarding Robot Scene 2: Moving Between Landscapes Scene 3: Making the Robot Walk Summary Challenge

6. Adding Depth with 3D Transforms

Introduction to 3D Transforms Drawing a 3D Cube Creating a House of Cards Summary Challenge

7. Animating 2D and 3D Transforms

Basic 3D Transform Animations with Transitions Optimizing Performance Blowing in the Wind: Animating Dandelion Seeds Summary Challenge

8. Using Transitions and Transforms to Animate Text

Introduction to the Typewriter Example The Animation’s Layout and Basic Styles Scene 1: Making the Quote Rise Up the Screen Scene 2: Making Text Fall Scene 3: Scrolling Text Scene 4: Growing Text Scene 5: Continuing the Animation Summary Challenge

9. Building Flash-Style Animations with Keyframe Animations

Introduction to the Meow Street Fat Cat Animation The Animation’s Layout and Basic Styles Scene 1: Moving the Newspaper Scene 2: Reading the Newspaper Scene 3: Moving to and Reading Page 2 Scene 4: Moving the Animation Outside Scene 5: Adding Murphy, the Toughest Cat Cop on the Beat Scene 6: Knocking on Morgan’s Door Scene 7: Animating a Spinning Newspaper Support for Opera 12 Summary Challenge

10. Creating Animated Infographics

What Are Infographics? Visualizing Data for Mixed Drinks Summary Challenge

11. Building Interactive Infographics

Creating an Element to Hold the Drink Recipes Unveiling the Recipe Page Highlighting the Selected Ingredient Summary Challenge

Index