A Guide to CSS Animation 📽

  1. Intro
  2. Our first animation
  3. Square path keyframes
  4. Adjusting animation-iteration-count
  5. animation-timing-function effects
  6. linear spinning square
  7. Toggling animation-play-state
  8. Staggered spins with animation-delay
  9. Shrinking element with animation-fill-mode
  10. Staggered fade in with animation-fill-mode
  11. Walk sign with animation-fill-mode
  12. Clapper board with animation-direction
  13. Basic chaining with shorthand
  14. Dynamic animations with CSS variables
  15. Changing animations with CSS variables
  16. Animating curved motion path
  17. Spin counter with animationiteration
  18. Dynamic delays with animationend
  19. Worm Loader with curved path
  20. animation-delay demo
  21. Sibling squares
  22. Animation with no curved path
  23. Animation without animation-fill-mode set
  24. Animation without persistent end state