Pause & Loop CSS Animations with WAIT! Animate

By Jake Rocheleau. in Web Design. Updated on June 27, 2020.

There’s a lot you can do with pure CSS animation, but pausing & looping an animation is not possible with the current W3 spec.

But with a free tool like WAIT! Animate you can actually create looped animations from scratch with custom delays between each loop. This may seem like a mundane task but it solves a pain point for many developers.

It should be noted that there is a CSS property called animation-delay which delays the start of a CSS animation. However it does not affect a repeating animation as it only delays the starting point.

WAIT! Animate auto-calculates how many pauses need to be placed inside custom animation keyframes to create the exact pause duration you need between loops. This could be done by hand but it’s extremely convolved, not to mention super annoying.

This web app can work with any CSS3 animation feature, including rotations and transforms. You’re not writing any new CSS properties but rather building on top of the keyframes feature to create pauses based on percentages (from 0% to 100%) inside the animation.

Check out the home page to see a few examples in action. It’s pretty clear what you can do and the source code is right there to copy/paste into your own work.

Please note this is not a fully-fledged library. It’s a generator that creates your CSS code on-the-fly based on whatever you need for the animation delay.

If you do want a simpler solution off-site then you can download the Sass mixin. This is a bit trickier because it requires a Sass map, so you’ll need to understand how to add custom properties and write your syntax properly.

Here’s an example of how you’d call the mixin:

@include waitAnimate(
  (
    animationName: animName,
    keyframes: (
      0: (
        transform: scale(1),
        background-color: blue
      ),
      50: (
        transform: scale(2),
        background-color: green
      ),
      100: (
        transform: scale(3),
        background-color: red
      )
    ),
    duration: 2,
    waitTime: 1,
    timingFunction: ease,
    iterationCount: infinite
  )
);

Pro web developers should have no problem learning the ropes and building this into a reusable mixin. But novice developers may struggle to get it working, hence the web app.

All this source code is available for free on GitHub if you want to download a copy locally. But since this is such a strange feature it’s not something you’ll probably need in many projects. That’s why the WAIT! Animate web app should be more than enough to help you solve a one-off problem of delaying looped animations with pure CSS.

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.