DEV Community

Cover image for How to add delay between CSS keyframe animation ⚓
Rajesh Royal
Rajesh Royal

Posted on

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);
    }
}



Enter fullscreen mode Exit fullscreen mode

Demo:

add delay between css keyframes

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

👋

Top comments (1)

Collapse
 
svgatorapp profile image
SVGator

Nice & simple! Thanks for sharing