WAIT! Animate - A CSS animation iteration delay generator

angularjs css3

WAIT! Animate

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

If you would like to comment on this post, feel free to tweet me @will_stone_