Can you change the animation-duration property in CSS smoothly?

Ever since the :has() selector came to Safari Technology Preview, I've been wanting to build a pure CSS app. I have a fairly decent demo working, on mobile at least, but there's an aspect of it that just takes the finesse out of it all.

The app is as simple as an app can be and relies on the animation-duration property to switch the timing of some animations. It does work, and all without CSS but when you change the property, the animations jump to adjust to the new timing.

I've put together a very basic demo to show the problem:

Yes, the demo makes use of the :has() selector instead of JavaScript! 🎉

Over the course of 5 seconds, the red box will shrink or grow (animation plays forwards for 5 seconds then reverses thanks to the animation-direction property). Tick the 'Faster?' checkbox and the speed will change to 2.5 seconds.

Have a play and toggle the checkbox as much as you want. You'll see the animation jump around quite a bit as it adjusts. Sometimes it will start from the fill width and others it will might be with the width set to 0 and many times it will be anywhere in between.

My guess is that when the timing changes, the browser knows where it would be in the animation if had been running at that speed all of the time and jumps to that frame. I get it, but I'd prefer for it to take the current state and ease into the new timing instead.

It seems that the answer to the question 'Can you change the animation-duration property in CSS smoothly?' is no, at least at the moment. If I find an answer, I'll be sure to update here and answer the questions I found on Stack Overflow.