How to add delay between CSS keyframe animation ⚓

Problem Statement

I want the animation to run for 4 seconds.

~ plus ~

I want the animation to delay for 6 seconds in between iterations.

~ equals ~

10 total seconds

Here is how you achieve it.



.swing {
    animation: swing ease-in-out 5s infinite alternate;
    transform-origin: center -20px;
    animation-delay: 0s;
}
@keyframes swing {
    0% {
        transform: rotate(3deg);
    }
    30% {
        transform: rotate(-3deg);
    }
    40% {
        transform: rotate(0deg);
    }
}

Demo:

You may change the animation and delay as per you need.

👋

Blog

How to add delay between CSS keyframe animation ⚓

Rajesh Royal

Join Our Newsletter. No Spam, Only the good stuff.

Related