Browsers don't allow delays between animation iterations

Ideally, with limited education and training, I should see an animation in my mind, go to my IDE, and code it in five minutes.

Basic animations may allow this but get even a bit more complicated, and you’ll hit a wall. For example, let’s say I want to run an animation multiple times with a delay between each time. CSS has a simple property for this, right? Right? No.

Browsers cannot easily handle delays between iterations with a simple CSS property.

I can’t set time between each run if I iterate it more than once. :/

You can specify how many times you want it to run in succession and then delay, but you cannot delay between each run :(

To get around this non-feature, I tried setting a JS delay beyond the animation length then removing and adding the animation class. Did this work?


The browser has about five conditions that’ll let one rerun an animation that exceed typical property changes, so no, it did not.

One that works is after removing a class have your JS read a property from the element-to-be-animated (which puts it back in some sort of animatable stack?) and then add the animating class again.

Note: You can also read a property of the animation target’s parent or child, and the remove-then-add-class technique will still work. Reading properties of elements outside the branch of the element, however, won’t work. I suppose this prevents the browser queueing up animation changes for things that have not been touched.