T
css animations scroll-driven keyframes web-design

Modern CSS Animations: Scroll-Driven, Spring, and Beyond

Take your web animations to the next level. Learn about CSS Scroll-Driven Animations, spring physics, and advanced cubic-bezier timing functions.

2026-04-18

Modern CSS Animations: Scroll-Driven, Spring, and Beyond

Animations are no longer just "nice-to-have" flourishes. They are essential tools for providing feedback, guiding user attention, and creating a memorable brand experience.

Modern CSS has introduced revolutionary ways to animate elements that previously required complex JavaScript scroll listeners or heavy animation libraries.

1. Scroll-Driven Animations: No JS Required

The most exciting addition to CSS animations is the Scroll-Driven Animation spec. It allows you to link the progress of an animation directly to the scroll position of a container.

How it works:

Previously, you needed window.onscroll and requestAnimationFrame. Now, you just need scroll-timeline.

@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-indicator {
  animation: progress-bar linear;
  animation-timeline: scroll(); /* Link to page scroll! */
}

Key Use Cases:

  • Reading Progress Bars: Shows how far the user has scrolled.
  • Parallax Effects: Move background elements at different speeds relative to scroll.
  • Reveal on Scroll: Fade in elements as they enter the viewport using view-timeline.

2. Advanced Keyframes and Composition

Modern CSS allows for more granular control over how animations are combined.

  • animation-composition: Defines how multiple animations affecting the same property should blend (e.g., replace, add, or accumulate).
  • animation-range: Fine-tune exactly when a scroll-driven animation starts and ends within the viewport.
.card {
  animation: fade-in linear;
  animation-timeline: view();
  /* Only animate while the element is in the middle 50% of the screen */
  animation-range: entry 25% exit 75%;
}

3. Beyond Linear: Cubic-Bezier and Spring Physics

Timing functions define the "feel" of an animation. While ease-in-out is standard, advanced designs use custom curves.

Cubic-Bezier

A cubic-bezier function allows you to create "overshoot" or "anticipation" effects.

.button:active {
  /* A slight bounce effect */
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

CSS Spring Animations (Experimental)

While not yet fully native in all browsers, the concept of Spring Physics (mass, stiffness, damping) is coming to CSS. This creates much more natural, organic movement than traditional duration-based timing.

4. Performance: The 60FPS Rule

The key to smooth animations is staying off the "Main Thread". Modern CSS animations are highly optimized, but only if you animate the right properties.

Safe to animate:

  • transform (scale, rotate, translate)
  • opacity
  • filter (some browsers)

Avoid animating (causes layout shifts):

  • width / height
  • margin / padding
  • top / left / bottom / right

5. View Transitions: Animating the DOM Change

Combined with the View Transition API, CSS can now handle the "morphing" of elements between two states, creating a seamless app-like experience.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

FAQ: Frequently Asked Questions

Q: Are Scroll-Driven Animations supported?

A: As of 2024, they are supported in Chrome and Edge. Firefox and Safari have them under development. You can use them today as a "progressive enhancement"—the site still works without them, but looks better with them.

Q: Why is my animation stuttering?

A: Ensure you are only animating transform and opacity. Check if you have too many backdrop-filter effects active, as these can be performance-heavy.

Q: Can I use @scroll-timeline?

A: The older @scroll-timeline syntax has been replaced by the more concise animation-timeline: scroll() and view() functions. We recommend using the newer syntax for future-proofing.

Bring Your Site to Life

Animations are the "soul" of a modern user interface. By mastering scroll-driven timelines and advanced timing functions, you can create professional, engaging experiences that keep users coming back.

Ready to perfect your timing? Try our Cubic-Bezier Generator (coming soon) or use our existing animation tools.

Back to Blog