How to Delay the Start of a CSS Animation

.container {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50%;
  margin: 50px auto;
  animation: containerAnimation 2s infinite;
}

.animated-border {
  position: absolute;
  left: 0;
  width: 97px;
  height: 97px;
  border: 2px solid;
  border-radius: 50%;
  animation: borderAnimation 2s infinite;
}

@keyframes containerAnimation {

  0% {
    transform: scale3d(0.9, 0.9, 1); // I've changed it to be more noticable.
  }

  5% {
    transform: scale3d(1.05, 1.05, 1);
  }
  
  100% {
    transform: scale3d(1.05, 1.05, 1);
  }
}

@keyframes borderAnimation {
  5% { // Start from here instead from 0%.
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

<div class="container">
  <div class="animated-border"></div>
</div>

CSS animation delay in between loop

Make your loop longer and add more keyframes.

@-webkit-keyframes slidingPrice {
  0%     { opacity: 0; bottom: -30px; } /* 0ms initial values */
  2.38%  { opacity: 1; bottom: 0; }     /* 150ms half of animation */
  34.13% { opacity: 1; bottom: 0; }     /* 2150ms still at half of animation */
  36.51% { opacity: 0; bottom: -30px; } /* 2300ms back to initial */
  100%   { opacity: 0; bottom: -30px; } /* 6300ms still at initial */
}

.price {
    -webkit-animation-name: slidingPrice;
    -webkit-animation-duration: 6300ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 4s;
}

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

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.

Related Topics