How to add a delay or smooth out scroll-driven animations using the animation-timeline property?

I’m currently using CSS scroll-driven animations with the new animation-timeline property. An example of the technique I’m referring to can be seen here: Image Reveal Example.

However, I’m facing an issue: I would like to add an animation delay to smooth out the animation, especially when scrolling with a mouse. Currently, the animation looks a bit choppy, as mouse scrolls on a PC can be less smooth and occur in larger, instant steps.

I’ve tried using the traditional CSS property animation-delay, but it doesn’t seem to have any effect when used with scroll-driven animations and the animation-timeline property.

Here is an example of how I want the animation to feel: Smooth Scroll Example. In this case, I’m using a JavaScript library to achieve smooth scrolling for the entire page. My goal is to apply a similar smooth, slow-moving effect for a CSS scroll-based animation without using a JS library.

To highlight the issue, here’s another example without the smooth scroll effect: Non-Smooth Example. The difference in fluidity is noticeable, and I’d like to replicate the smoother experience using pure CSS.

Is there a way to introduce a delay or smooth out this animation behavior using just CSS, or is JavaScript still required? I’m primarily looking for a CSS-based solution.

You need to sign in to view this answers