Repeat CSS3 Animation With Delay

By February 1, 2016Blog, 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