Menu
I have a css3 animation with the following:
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.animated {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2.4s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}
It works flawlessly, well..., I want to make it wait between the loops:
animation-start, animation-finish, wait(about 0.5s), animation start, animation end, wait(about 0.5s)...
PS: I've tried -webkit-animation-delay, it does not work.
Any help?
587
There’s a lot you can do with pure CSS animation, but pausing & looping an animation is not possible with the current W3 spec. But with a free tool like WAIT! Animate you can actually create looped animations from scratch with custom delays between each loop. This may seem like a mundane task but it solves a pain point for many developers.
Animate you can actually create looped animations from scratch with custom delays between each loop. This may seem like a mundane task but it solves a pain point for many developers. It should be noted that there is a CSS property called animation-delay which delays the start of a CSS animation.
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
It should be noted that there is a CSS property called animation-delay which delays the start of a CSS animation. However it does not affect a repeating animation as it only delays the starting point. WAIT!
Add 0.5 seconds to your animation duration, then create an extra frame in your keyframes that doesn't change the rotation amount;
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
83% { /*2.4 / 2.9 = 0.827*/
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.animated {
...
-webkit-animation-duration: 2.9s; /*note the increase*/
...
}
Little demo: little link.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
