Scroll-Driven Animation with animation-timeline

Tying `@keyframes` progress to scroll position instead of time using `animation-timeline` and `animation-range`, with no scroll event listener required.

1 post

Posts tagged animation-timeline

• Animating SVG: A Guide to CSS Transitions and Keyframes

  Bring static shapes to life with transitions and @keyframes.
  Learn how to animate SVG with CSS: transitions vs @keyframes, self-drawing lines, clip-path reveals, staggered delays, motion paths, shape morphing, and scroll-driven timelines.