CSS Keyframe Animation with Delay Between Iterations

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.
Nope
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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s