How can I increase the delay between my infinite lopping CSS animation?

user_16156448 0
Viewed 166

I've seen this discussed before, but it is usually for an animation that has 1 stop point and end point. Since the arrow in my example is bouncing https://5pshomes.artrageousdemo.com/ I am a bit confused on how this would work. How can I add a few second delay between each iteration of the animation, while keeping the animation itself 2 seconds long?

.fl-icon-wrap{
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
    animation-delay: 2s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

Thanks,

css-animations css html
1 Answers

When setting animation-iteration-count to infinite, the animation will repeat forever. There is no native way to increment the time between two iterations.

You can, however, increase the time in between the moment the element starts being "animated" and the effective start of the animation, by setting animation-delay property. But this delay is only applied before the first iteration, not in between consecutive iterations.

To achieve your desired result you have two methods:

  • modify the animation so that the delay you want is contained within the animation loop (this is the most common way to do it). With this technique, the pause is set to a percentage of the entire animation iteration so you can't decouple the speed of the animation from the time between actual element animations.
  • apply the animation using a class and write a small script which applies and removes that class at the appropriate times. This technique has the advantage of decoupling the duration of the animation from the time between applications and it's useful especially if the animation-iteration-count is set to 1. Also note using this technique animation-delay applies each time you apply the class, if you have set it to a valid truthy value.

Technically, there would be a third way, which would be to set the animation-play-state to running/paused, using JavaScript, at the appropriate times, similarly to the second method. But, in practice, if for any reason this goes out of sync with the actual animation, it might get to the point where it pauses the animation mid-way in the actual animation, resulting in a "buggy" behavior, from the user's perspective so option 2 above should always be preferred to this, technically possible, third method.

user_18916770
Related