1 Thing A Week 1 Thing
A Week

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

Week 257.0 — 26th September '22

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.

More from 1 Thing A Week
« Initial thoughts on the iPhone 14 Pro Why I can't wait for the :has() pseudo-class in CSS CSS Grid Pattern Top 2 World Cup 2022 kits »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 257.1 – Monday
    1. I made Retro Pokémon Game Box WUZU Clay on youtube.com
    2. Red Sprite Lightning over the Czech Republic Daniel Ščerba on apod.nasa.gov
  2. 257.2 – Tuesday
    1. Now Watch swiss-miss.com
  3. 257.5 – Friday
    1. The Sounds of CDMX pudding.cool

Jump to notable items for Week #256, Week #258 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit