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

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

Video Description

The media elements for Learning CSS3 Animations and Transitionsdemonstrate key points in the text.

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