Animations

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. Visualizing background color changes over time
12. animation-duration with invalid value
13. Using fractional duration values
14. Basic bouncing ball
15. Partial animation
16. Bouncing ball animation with negative animation delay
17. Animation events
18. Animation events, again
19. Animation chaining
20. Animation following and animation
21. Animation chaining with Javascript
22. Animation iteration delay with Javascript
23. Animation iteration delay
24. Animation iteration delay
25. Animation iteration delay
26. Animation iteration delay
27. Animation iteration delay (redux)
28. Cubic Bézier named functions
29. An outlandish Bézier curve
30. Effect of outlandish Bézier curve
31. Representation of a cubic Bézier curve
32. Better bouncing ball animation
33. Sprite of dancing
34. Steps timing function, Gangam style
35. Visualizing start and end change points
36. Steps timing function with translate transforms
37. Changing the animation timing function mid-animation
38. Representation of another cubic Bézier curve
39. Bodacious bouncing ball animation
40. Interactive bouncing ball animation
41. Partial iteration with fill-mode
42. Partial iteration with fill-mode, again
43. A snowflake
44. Running animations take precedence
45. Last declared anaimation takes precedence
46. A snowflake with animation starts and stops