wordpress - How to add delay between repeating infinite animation via CSS override

Question

I'm serving up Animate.css from this CDN to my WordPress site and would like to create some CSS class overrides that will allow me to delay the amount of time that occurs, before the animation repeats. Currently, the animations are set to "infinite" repeat.

Here's a live example of how the animated image just keeps repeating, very quickly.

I'd like to be able to apply class="delay4" for example, if I wanted there to be a 4s delay after an animation occurs. Then after those 4s the animation would repeat.

I can easily add CSS overrides to my theme so this would be best option since I'm using a CDN.

BONUS!! It would be ideal if I could also specify a duration for the animation. i.e. Some of the animations happen so fast and I think if they were slowed down a bit, they might look better.

Answer 1

I have two solution on this one is purely custom css based and other is animate.css + jquery based.

Css Solution:

img {
  animation: shake 5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  2% { transform: translate(-1px, -2px) rotate(-1deg); }
  4% { transform: translate(-3px, 0px) rotate(1deg); }
  6% { transform: translate(3px, 2px) rotate(0deg); }
  8% { transform: translate(1px, -1px) rotate(1deg); }
  10% { transform: translate(-1px, 2px) rotate(-1deg); }
  12% { transform: translate(-3px, 1px) rotate(0deg); }
  14% { transform: translate(3px, 1px) rotate(-1deg); }
  16% { transform: translate(-1px, -1px) rotate(1deg); }
  18% { transform: translate(1px, 2px) rotate(0deg); }
  20% { transform: translate(1px, -2px) rotate(-1deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

<img src="https://jewelbound.com/wp-content/uploads/2018/11/icons8-downloading-updates-100.png"/>