WAIT! Animate - A CSS animation iteration delay generator
CSS doesn’t provide an easy way to pause an animation before it loops around again. Yes, there’s
animation-delay but this simply denotes a delay at the very start of the animation, i.e on load. To find a solution to this problem, I created WAIT! Animate, an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration.
The idea for the project started when I was using the Font Awesome Animation library. I found that the animations repeated too quickly for the project I was working on. Knowing that there is no such CSS property as animation-wait, I realised I’d have to rewrite the keyframes for each animation. However it is simply an equation of animation-duration and where in the keyframes the animation ends. I originally wrote a SASS function; it calculated all the keyframes up to 30 seconds’ wait time to create an augmented version of the library. This was clearly a poor solution as there was no way somebody would require all the variations. A tool to calculate the exact wait time was needed, hence WAIT! Animate was devised.
The code generator (and website) is written using AngularJS and there’s a SASS mixin in the FAQ for easier integration with your projects.
Website: WAIT! Animate
It’s a really fun hack that’s also pretty obscure by design. But it goes to show just how much is possible with CSS3 and a little ingenuity.
A nice CSS animation tool which provides an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration.
It’s truly a unique CSS code generator
Dev Code Geek
If you would like to comment on this post, feel free to tweet me @will_stone_