Creating Web Animations

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