Creating Web Animations

Kirupa Chinnathambi has spent most of his life trying to teach others to love web development as much as he does. In 1999, before blogging was even a word, he started posting tutorials on kirupa.com. In the years since then, he has written hundreds of articles, written a few books (none as good as the one he hopes to write for O Reilly), recorded a bunch of videos you can find on YouTube, and even worked for a long time on helping improve the state of HTML tooling at Microsoft. When he isn't writing or talking about web development, he is probably sleeping...or writing about himself in 3rd person."

The Basics
Chapter 1Introduction to Web Animations
What Is an Animation?
Chapter 2Introduction to CSS Animations
Creating a Simple Animation
What Just Happened
The Longhand Version
Conclusion
Chapter 3Introduction to CSS Transitions
Creating a Simple Transition
What Just Happened
The Longhand Version
Conclusion
Chapter 4Working with CSS Timing Functions
What Is a Timing Function?
Timing Functions in CSS
Conclusion
Chapter 5Ensuring Your Animations Run Really Smoothly
What Is a Smooth Animation?
Creating Responsive 60 fps Animations
Conclusion
Chapter 6Transitions, Animations, and JavaScript
It’s Just Property Changes
A Tale of Two Styling Approaches
Animating with requestAnimationFrame
Conclusion
Chapter 7CSS Animations Versus CSS Transitions
Similarities
Differences
Conclusion
Learning from Examples
Chapter 8Animating Your Links to Life
The Starting Point
Animated Underline
Simple Background Color Change
Cooler Background Color Change
Conclusion
Chapter 9Simple Text Fade and Scale Animation
The Example
Conclusion
Chapter 10Creating a Smooth Sliding Menu
How the Sliding Menu Works
Creating the Sliding Menu
Conclusion
Chapter 11Scroll-Activated Animations
The Basic Idea
Building It All Out
Conclusion
Chapter 12The iOS Icon Wobble/Jiggle
The Full HTML and CSS
Deconstructing This Effect
Looking at the CSS
Faking Randomness
Conclusion
Chapter 13Parallax Scrolling
Overview of How the Parallax Effect Works
Getting Started
Conclusion
Chapter 14Sprite Sheet Animations Using Only CSS
Creating the Sprite Sheet
Conclusion
Chapter 15Creating 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
Chapter 16Conclusion
Until Next Time