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

Source: GitHub

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.

Hongkiat

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.

Design Hooks

It’s truly a unique CSS code generator

Best CSS code generators - Nastia

25 useful web animation tools 2017

Bashooka

16 best CSS code generators for developers

Dev Code Geek