Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

Released December 2012
Publisher(s): Addison-Wesley Professional
ISBN: 9780133064438

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Get Started Fast with Professional-Quality CSS3 Animation!

For web designers and developers building rich web and mobile applications, standards-based CSS3 is the future! Learning CSS3 Animations and Transitions is the only tutorial focused entirely on creating quality animations and transitions with CSS3. Leading web developer and trainer Alexis Goldstein¿ covers everything web professionals need to know through solid examples that help you build your¿ skills one step at a time.

Goldstein’s project-based approach guides you through using transforms, transitions, keyframe¿ animations, JavaScript, and even advanced techniques such as parallax scrolling. You’ll discover how to make the most of pure HTML5/CSS3, how to go even further with JavaScript and jQuery animation triggers, and how to add life, movement, and effects to any site or app. Along the way, you’ll find expert knowledge, best practices, and “jumpstart” code for building everything from rich animations to¿ advanced interactive infographics!

If you’re ready to move on from Adobe® Flash® Technology,¿and create dynamic, motion-rich experiences for today’s¿ browsers and mobile devices, Learning CSS3 Animations and¿ Transitions is your fastest route to success!

Coverage includes

  • Employing free tools to make the most of CSS3’s capabilities

  • Supporting vendor-specific prefixes and checking for HTML5 support

  • Leveraging the full power of CSS3 transforms

  • Combining transforms with transitions to animate changes over time

  • Using keyframe animations to gain fine-grained control over every moment of your animation

  • Building 3D-like effects without 3D manipulation

  • Using 3D transform properties to control depth

  • Creating powerful effects that combine 2D/3D transforms, transitions, and keyframe animations

  • Bringing text to life with animation techniques and jQuery

  • Creating full-fledged cartoon-style animations

  • Visualizing data through animated and interactive infographics

Table of contents

  1. Title Page
  2. Copyright Page
  3. Dedication Page
  4. Contents at a Glance
  5. Table of Contents
  6. Preface
    1. Who This Book Is For
    2. Who This Book Isn’t For
    3. How This Book Is Organized
    4. Chapter 1, “Working with CSS3 Animations”
    5. Chapter 2, “Building a Foundation with Transforms”
    6. Chapter 3, “Animating Elements with Transitions”
    7. Chapter 4, “Keyframe Animations”
    8. Chapter 5, “Creating 3D Effects with Parallax Scrolling”
    9. Chapter 6, “Adding Depth with 3D Transforms”
    10. Chapter 7, “Animating 2D and 3D Transforms”
    11. Chapter 8, “Using Transitions and Transforms to Animate Text”
    12. Chapter 9, “Building Flash-Style Animations with Keyframe Animations”
    13. Chapter 10, “Creating Animated Infographics”
    14. Chapter 11, “Building Interactive Infographics”
    15. About the Sample Code
  7. Acknowledgments
  8. About the Author
  9. 1. Working with CSS3 Animations
    1. Intro to CSS3 Animations
    2. Summary of CSS3 Animation Tools
    3. The Modernizr Library
    4. Hardware Acceleration
    5. A Final Word on Working with CSS3 Animations
  10. 2. Building a Foundation with Transforms
    1. Introducing Transforms
    2. Transform Functions
    3. Building a Bicycle in CSS3
    4. Summary
    5. Challenge
  11. 3. Animating Elements with Transitions
    1. Introduction to Transitions
    2. Triggering a Transition Animation with Hover Events
    3. Triggering a Transition Animation with Click Events
    4. Transition Properties
    5. Spinning the Bike Wheels
    6. Animating the Bike to Move Across the Screen
    7. Summary
    8. Challenge
  12. 4. Keyframe Animations
    1. Introduction to Keyframe Animations
    2. Controlling a Keyframe Animation with Properties
    3. Animating a Recoiling Spring
    4. Animating a Floating Balloon
    5. Summary
    6. Challenge
  13. 5. Creating 3D Effects with Parallax Scrolling
    1. Introduction to Parallax Scrolling
    2. A Three-Layer Parallax Scrolling Animation
    3. Animating Several Scenes with Parallax Scrolling
    4. The Animation’s Layout and Basic Styles
    5. Scene 1: Creating a Skateboarding Robot
    6. Scene 2: Moving Between Landscapes
    7. Scene 3: Making the Robot Walk
    8. Summary
    9. Challenge
  14. 6. Adding Depth with 3D Transforms
    1. Introduction to 3D Transforms
    2. Drawing a 3D Cube
    3. Creating a House of Cards
    4. Summary
    5. Challenge
  15. 7. Animating 2D and 3D Transforms
    1. Basic 3D Transform Animations with Transitions
    2. Optimizing Performance
    3. Blowing in the Wind: Animating Dandelion Seeds
    4. Summary
    5. Challenge
  16. 8. Using Transitions and Transforms to Animate Text
    1. Introduction to the Typewriter Example
    2. The Animation’s Layout and Basic Styles
    3. Scene 1: Making the Quote Rise Up the Screen
    4. Scene 2: Making Text Fall
    5. Scene 3: Scrolling Text
    6. Scene 4: Growing Text
    7. Scene 5: Continuing the Animation
    8. Summary
    9. Challenge
  17. 9. Building Flash-Style Animations with Keyframe Animations
    1. Introduction to the Meow Street Fat Cat Animation
    2. The Animation’s Layout and Basic Styles
    3. Scene 1: Moving the Newspaper
    4. Scene 2: Reading the Newspaper
    5. Scene 3: Moving to and Reading Page 2
    6. Scene 4: Moving the Animation Outside
    7. Scene 5: Adding Murphy, the Toughest Cat Cop on the Beat
    8. Scene 6: Knocking on Morgan’s Door
    9. Scene 7: Animating a Spinning Newspaper
    10. Support for Opera 12
    11. Summary
    12. Challenge
  18. 10. Creating Animated Infographics
    1. What Are Infographics?
    2. Visualizing Data for Mixed Drinks
    3. Summary
    4. Challenge
  19. 11. Building Interactive Infographics
    1. Creating an Element to Hold the Drink Recipes
    2. Unveiling the Recipe Page
    3. Highlighting the Selected Ingredient
    4. Summary
    5. Challenge
  20. Index

Product information

  • Title: Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript
  • Author(s):
  • Release date: December 2012
  • Publisher(s): Addison-Wesley Professional
  • ISBN: 9780133064438