Learning CSS3 Animations and Transitions (Companion Video): Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframe Animations, and JavaScript

Table of contents

1. Turning on Hardware-Accelerated Layers in Chrome 00:00:39
2. Launching Safari with Hardware-Accelerated Layers Viewable 00:00:21
3. Transitioning Background Color Changes 00:00:06
4. Transitioning Background Color Changes After a Click 00:00:07
5. Spinning the Bike Wheels on :hover 00:00:12
6. The Bike Moves Across the Screen 00:00:09
7. Animating Background Color Changes with Keyframe Animations 00:00:22
8. Making an Animation's Property Changes Stick 00:00:10
9. Animating the first three keyframes 00:00:23
10. Animating a Bouncing Spring: The Completed Example 00:00:08
11. Floating Balloon Animation 00:00:10
12. Desert Scene with Parallax Scrolling 00:00:05
13. Scene One Animation 00:00:05
14. Transition between Scene 1 and Scene 2 00:00:05
15. The Final Parallax Animation 00:00:05
16. How perspective-origin will change with the window if the container does not have a fixed size 00:00:12
17. The Completed Rotatable Cube 00:00:25
18. Scaling a Seed Up with scale3d 00:00:05
19. Flipping a seed about the x-axis with rotateX 00:00:04
20. The completed seed scatter animation 00:00:04
21. Animating Typing One Line of Text 00:00:03
22. Animating Falling Text with rotateY 00:00:03
23. Animating Scrolling Text 00:00:02
24. Animating Changes to Text's Scale 00:00:04
25. The Complete Animation 00:00:44
26. Scene 1 of the Animation 00:00:06
27. Turning the Newspaper to Read Page Two 00:00:04
28. Zooming Out with scale3d 00:00:04
29. Animating Knocking with rotateZ 00:00:07
30. Animating a Spinning Newspaper 00:00:03
31. The Complete Animation 00:00:23
32. Preview of Completed, Animated Infographic 00:00:08
33. Ingredient Labels Fading In 00:00:07
34. Sliding in the Recipe Page 00:00:05
35. Hiding an Old Recipe When a New Drink Is Clicked 00:00:08
36. Revealing the Recipe Paper for Row Two Drinks 00:00:07
37. Pulsing Shadow When New Ingredient is Clicked 00:00:09