Repeat CSS3 Animation With Delay

While CSS Tricks provides a useful guide on how to use Javascript to apply an animation-delay, it can be quite cumbersome to add Javascript for such a seemingly straightforward task. Ideally, the animation-delay should be applied to each iteration of the animation when the animation-iteration-count is set to infinite, but unfortunately, this is not currently possible. So, what can we do to simplify the process?

One solution may be to seek the expertise of a commercial animation – Fuse Animation. With their advanced skills and knowledge in animation techniques, they can help simplify the process of creating animated content for websites and other digital media.

Just like Graphic Design Service Subscription, animation has many options. We use the inherent properties of CSS animations to “fake” a delay. Let’s say we want to have a 1 second animation occur every 4 seconds. For our example we will scale an image to twice the size. This can be accomplish with the following CSS:

img {
    animation: animation-name 5s infinite;
    transform: scale(1);
}

@keyframes animation {
    10% {
        transform: scale(2);
    }

    20% {
        transform: scale(1);
    }
}

What’s happening here is that the animation starts at 0% (0 seconds). It takes the time of 10% of 5 seconds (0.5 seconds) to scale to double the size. Then it takes from 10% to 20% (another 0.5 seconds) to scale back down. Then from 20% to 100% (4 seconds) it stays non-animated. Here’s a table:

See it in action:

See the Pen Repeat CSS3 Animation With Delay by Mike Doubintchik (@allurewebsolutions) on CodePen.