Wait animate tool

By default, CSS is not providing you an easy way to pause an animation before it loops again. You can use animation-delay property but it will simply indicate a delay before the animation starts. Will Stone – a passionate web developer from UK, fixed that.

He created Wait! Animate – 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. Moreover, Will created a config tool that adds waiting time to your own animations without the need of JavaScript.

Have a look at these examples to see how it works. You can also set up a custom wait time and copy the code on the original website.

See the Pen Waitanimate by designhooks (@designhooks) on CodePen.

Will Stone was happy to tell us the story behind this cool project. Here it is:

“It all 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. I knew that there was no such CSS property as “animation-wait”, so the only solution was to use JavaScript. I realised that it was simply an equation of animation-duration and where in the keyframes the animation ends. I originally wrote a piece of SASS that 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.”

You may also like