Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it’s not-so-straightforward, but doable. You need to fake it.
There is an animation-delay property, but that won’t help us here. That delays the start of the animation, but after it’s started it runs continuously.
Solution: Keyframes with No Changes
You’ll need to do a little mental math:
I want the animation …
CSS Keyframe Animation with Delay Between Iterations is a post from CSS-Tricks
via Reme Le Hane