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 inf…


This content originally appeared on DEV Community and was authored by DEV Community

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:

add delay between css keyframes

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

👋


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2022-03-16T08:47:26+00:00) How to add delay between CSS keyframe animation ⚓. Retrieved from https://www.scien.cx/2022/03/16/how-to-add-delay-between-css-keyframe-animation-%e2%9a%93/

MLA
" » How to add delay between CSS keyframe animation ⚓." DEV Community | Sciencx - Wednesday March 16, 2022, https://www.scien.cx/2022/03/16/how-to-add-delay-between-css-keyframe-animation-%e2%9a%93/
HARVARD
DEV Community | Sciencx Wednesday March 16, 2022 » How to add delay between CSS keyframe animation ⚓., viewed ,<https://www.scien.cx/2022/03/16/how-to-add-delay-between-css-keyframe-animation-%e2%9a%93/>
VANCOUVER
DEV Community | Sciencx - » How to add delay between CSS keyframe animation ⚓. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/16/how-to-add-delay-between-css-keyframe-animation-%e2%9a%93/
CHICAGO
" » How to add delay between CSS keyframe animation ⚓." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/03/16/how-to-add-delay-between-css-keyframe-animation-%e2%9a%93/
IEEE
" » How to add delay between CSS keyframe animation ⚓." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/03/16/how-to-add-delay-between-css-keyframe-animation-%e2%9a%93/. [Accessed: ]
rf:citation
» How to add delay between CSS keyframe animation ⚓ | DEV Community | Sciencx | https://www.scien.cx/2022/03/16/how-to-add-delay-between-css-keyframe-animation-%e2%9a%93/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts