0

Here I have an animation that shakes a button every 4 seconds:

@keyframes wiggle {
  0% {
    transform: rotate(0);
  }
  3% {
    transform: rotate(10deg);
  }
  6% {
    transform: rotate(-10deg);
  }
  9% {
    transform: rotate(10deg);
  }
  12% {
    transform: rotate(-10deg);
  }
  15% {
    transform: rotate(0);
  }
}

Using an HTML number input I can change the duration of the animation, but as a side effect it makes the shaking animation slower. Is there a way I can preserve the speed of the shaking animation while increasing the interval between each shake? Maybe with two animations? Or a setInterval() ?

To clarify, I want the time between keyframes 0% and 15% to be the same while increasing the time between each animation.

Infinite loops

Thanks

bib
  • 31
  • 4
  • 1
    you want to look at `animation-delay` property – Kosh Aug 18 '22 at 15:40
  • @Kosh the animation-delay property delays the start of the animation, not in between each iteration – bib Aug 18 '22 at 15:52
  • looks like you want to figure out how animation iterates too. – Kosh Aug 18 '22 at 15:57
  • What you need to do is essentially double the time the animation runs and end the animation earlier. If you want the shake animation to take say 3 seconds in total. Double that to 6 seconds on the animation property and in the keyframes make the 50% and 100% the same. This will finish the animation in 3 seconds with 3 seconds being a seeming delay before the next loop. – OMGDrAcula Aug 18 '22 at 16:01
  • @OMGDrAcula but I want infinit loops – bib Aug 18 '22 at 19:55
  • Yea that won't stop it from being infinite. Just set it to infinite and how long it should take combining the shake animation and delay between them you want. If the shake animation takes a total of 3 seconds and you want a 3 second delay then set the keyframes for 50% and 100% to the same value and set the animation time to 6 seconds on the animation property. I actually found an example for you https://css-tricks.com/css-keyframe-animation-delay-iterations/ – OMGDrAcula Aug 19 '22 at 12:44

0 Answers0