Repeat CSS3 Animation With Delay

By February 1, 2016 March 20th, 2017 Blog, CSS
Allure Web Solutions Code Snippet

Yes, you could use javascript as described well at CSS Tricks. But I think it’s too much to have to add javascript for something which intuitively should be much simpler. In a perfect web development world, the animation-delay would apply to each run of the animation when animation-iteration-count is set to infinite. Well…we don’t live in a perfect world. So what do we do?

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:

keyframetimeanimation
0%0sstart
10%0.5scontinues
20%1sends
100%5snone

See it in action:

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

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply