O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Web Animations

Book Description

Creating user interfaces that are fun, practical, fluid, and memorable is hard. And existing learning materials don’t explain the context of the UI problem that animations are trying to solve. That’s where this book comes in. You'll gain a solid technical understanding of how to create awesome animations using CSS and learn how to implement common UI patterns, using practical examples that rely on animations to solve a core problem. Frontend web developers and designers will not only learn important technical details, but also how to apply them to solve real-world problems.

Table of Contents

  1. Preface
    1. Know Your Basic HTML, CSS, and JavaScript
    2. About Authoring Tools
    3. Using the Code Examples
    4. O’Reilly Safari
    5. Getting Help/Contacting the Author
      1. Contacting O’Reilly
    6. Acknowledgments
  2. I. The Basics
  3. 1. Introduction to Web Animations
    1. What Is an Animation?
      1. The Start and End States
      2. Interpolation
      3. Animations on the Web
      4. Conclusion
  4. 2. Introduction to CSS Animations
    1. Creating a Simple Animation
    2. What Just Happened
      1. The Name
      2. Duration and Keyframes
      3. Looping
    3. The Longhand Version
    4. Conclusion
  5. 3. Introduction to CSS Transitions
    1. Creating a Simple Transition
    2. What Just Happened
    3. The Longhand Version
    4. Conclusion
  6. 4. Working with CSS Timing Functions
    1. What Is a Timing Function?
    2. Timing Functions in CSS
      1. Timing Functions in CSS Animations
      2. Timing Functions in CSS Transitions
      3. Meet the Timing Function Curve
      4. The cubic-bezier Timing Function
      5. The step Timing Function
    3. Conclusion
  7. 5. Ensuring Your Animations Run Really Smoothly
    1. What Is a Smooth Animation?
    2. Creating Responsive 60 fps Animations
      1. Meet the Animation-Friendly Properties
      2. Push Element Rendering to the GPU
    3. Conclusion
  8. 6. Transitions, Animations, and JavaScript
    1. It’s Just Property Changes
      1. The Example
      2. Initial State Using CSS, Changes Using JS
      3. What Just Happened?
    2. A Tale of Two Styling Approaches
      1. Setting the Style Directly
      2. Adding and Removing Classes Using JavaScript
    3. Animating with requestAnimationFrame
    4. Conclusion
  9. 7. CSS Animations Versus CSS Transitions
    1. Similarities
    2. Differences
      1. Triggering
      2. Looping
      3. Defining Intermediate Points/Keyframes
      4. Specifying Properties Up Front
      5. Interaction with JavaScript
    3. Conclusion
  10. II. Learning from Examples
  11. 8. Animating Your Links to Life
    1. The Starting Point
    2. Animated Underline
    3. Simple Background Color Change
    4. Cooler Background Color Change
    5. Conclusion
  12. 9. Simple Text Fade and Scale Animation
    1. The Example
      1. The CSS Animation
      2. The Easing Function
    2. Conclusion
  13. 10. Creating a Smooth Sliding Menu
    1. How the Sliding Menu Works
    2. Creating the Sliding Menu
      1. The Initial Page
      2. Adding the Menu
      3. Making the Menu Work
      4. Adding Some Finishing Touches
    3. Conclusion
  14. 11. Scroll-Activated Animations
    1. The Basic Idea
      1. The Content
      2. It’s Scrolling Time
      3. Identifying the Elements
      4. Modifying the Elements
    2. Building It All Out
      1. Listening to the Scroll Event
      2. Detecting When Elements Are Visible
      3. Putting It All Together
      4. Some Performance Considerations
    3. Conclusion
  15. 12. The iOS Icon Wobble/Jiggle
    1. The Full HTML and CSS
    2. Deconstructing This Effect
    3. Looking at the CSS
    4. Faking Randomness
      1. Slightly Different Variants of Style Rules + Keyframes
      2. Altering Some CSS Properties and Their Values…Inline!
    5. Conclusion
  16. 13. Parallax Scrolling
    1. Overview of How the Parallax Effect Works
    2. Getting Started
      1. Adding Our Background Elements
      2. The JavaScript
    3. Conclusion
  17. 14. Sprite Sheet Animations Using Only CSS
    1. Creating the Sprite Sheet
      1. The Actual Implementation
      2. It’s Animation Time
      3. The Steps Easing Function in Action
    2. Conclusion
  18. 15. Creating a Sweet Content Slider
    1. Overview of How It Works
    2. The Content
      1. The Content (For Realz This Time)
      2. What You Just Did
    3. Clipping the Content
    4. The Navigation Links
    5. Making the Content Actually Slide
      1. Adding the JavaScript
      2. Adding the Transition
    6. Understanding the Code (and More!)
      1. What’s Really Going On
      2. The Role of the data-pos Attribute
      3. It’s All About the JavaScript
    7. Conclusion
  19. 16. Conclusion
    1. Until Next Time
  20. Index