Creating Web Animations

Preface

Part 1: The Basics
1. Introduction to Web Animations
What Is an Animation?

2. Introduction to CSS Animations
Creating a Simple Animation
What Just Happened
The Longhand Version
Conclusion

3. Introduction to CSS Transitions
Creating a Simple Transition
What Just Happened
The Longhand Version
Conclusion

4. Working with CSS Timing Functions
What Is a Timing Function?
Timing Functions in CSS
Conclusion

5. Ensuring Your Animations Run Really Smoothly
What Is a Smooth Animation?
Creating Responsive 60 fps Animations
Conclusion

6. Transitions, Animations, and JavaScript
It’s Just Property Changes
A Tale of Two Styling Approaches
Animating with requestAnimationFrame
Conclusion

7. CSS Animations Versus CSS Transitions
Similarities
Differences
Conclusion

Part 2: Learning from Examples
8. Animating Your Links to Life
The Starting Point
Animated Underline
Simple Background Color Change
Cooler Background Color Change
Conclusion

9. Simple Text Fade and Scale Animation
The Example
Conclusion

10. Creating a Smooth Sliding Menu
How the Sliding Menu Works
Creating the Sliding Menu
Conclusion

11. Scroll-Activated Animations
The Basic Idea
Building It All Out
Conclusion

12. The iOS Icon Wobble/Jiggle
The Full HTML and CSS
Deconstructing This Effect
Looking at the CSS
Faking Randomness
Conclusion

13. Parallax Scrolling
Overview of How the Parallax Effect Works
Getting Started
Conclusion

14. Sprite Sheet Animations Using Only CSS
Creating the Sprite Sheet
Conclusion

15. Creating a Sweet Content Slider
Overview of How It Works
The Content
Clipping the Content
The Navigation Links
Making the Content Actually Slide
Understanding the Code (and More!)
Conclusion

16. Conclusion
Until Next Time

Index