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.
👋
Top comments (1)
Nice & simple! Thanks for sharing