CSS carousels are already quite capable once you establish a scroll container and manage the overflow. Lately, I’ve been thinking about how another modern CSS feature—Scroll-Driven Animations—might fit right into that same scrolling context.

Turns out, it does. You can define keyframes and apply them directly to the carousel items, and the animation fires as you navigate through the carousel. At least that’s the behavior in Chrome right now.

It works pretty much as you’d expect:

@keyframes foo {
  from {
    height: 0;
  }
  to {
    height: 100%;
    font-size: calc(2vw + 1em);
  }
}

.carousel li {
  animation: foo linear both;
  animation-timeline: scroll(inline);
}

Of course, there are more elaborate ways to animate these components. What stands out to me is how the demo now merges CSS Carousels with Scroll-Driven Animations. The catch: when I added CSS Scroll Snapping with smooth scrolling, the scroll-driven animation wiped that behavior out.

I tried a view() timeline as a workaround. That gives each carousel item a smoother animation as it enters the viewport—but smooth scrolling still doesn’t cooperate.