Animation

Chapter 19

Figures & Code Examples

  1. Weird animation names work
  2. Keywords as animation names are a bad idea
  3. The W animation
  4. No 0% or 100% keyframes
  5. Without a midpoint, auto doesn’t animate well
  6. Setting/omitting initial values and 0%
  7. Animation API
  8. Unfortunate animation names
  9. Keywords as animation names are a bad idea (redux)
  10. No 0% or 100% keyframes (redux)
  11. animation-duration with invalid value
  12. Using fractional duration values
  13. Basic bouncing ball
  14. Partial animation
  15. Bouncing ball animation with negative animation delay
  16. Animation events
  17. Animation events, again
  18. Animation chaining
  19. Animation following and animation
  20. Animation chaining with Javascript
  21. Animation iteration delay with Javascript
  22. Animation iteration delay
  23. Animation iteration delay
  24. Animation iteration delay
  25. Animation iteration delay
  26. Animation iteration delay (redux)
  27. Cubic Bézier named functions
  28. An outlandish Bézier curve
  29. Effect of outlandish Bézier curve
  30. Representation of a cubic Bézier curve
  31. Better bouncing ball animation
  32. Sprite of dancing
  33. Steps timing function, Gangam style
  34. Visualizing start and end change points
  35. Steps timing function with translate transforms
  36. Changing the animation timing function mid-animation
  37. Representation of another cubic Bézier curve
  38. Bodacious bouncing ball animation
  39. Interactive bouncing ball animation
  40. Partial iteration with fill-mode
  41. Partial iteration with fill-mode, again
  42. A snowflake
  43. Running animations take precedence
  44. Last declared anaimation takes precedence
  45. A snowflake with animation starts and stops