Add Delayed Time in CSS3 Animation

How do I add an animation delay between each iteration

You could just add a keyframe at 50% in your @keyframes rule and make it width:100%, then increase your animations duration to double that of its current duration. That way, if it is 6 seconds, then you will have a 3 second pause before the infinite loop starts at 0% again.

.type {
  width: max-content;

}
.type h1{
    animation: typing 6s steps(31) infinite;
    animation-delay: 2s;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid black;
    width: 0;
}

@keyframes typing {
    0%{
        width: 0%;
    }
    50%, 100% {
        width: 100%;
    }
   
}

<div class="type">
    <h1>Hobbies, Goals, and Aspirations</h1>
</div>

CSS Animation Timing Issue on Delay

You have one animation that runs evert 2 seconds and another one that runs for 2.1 seconds, of course they won't sync.
What you can do is set the delay in the keyframes, so instead of 0% it will start in a different value.

For example:

.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>

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.

add time delay to animate and redirect to next image

Use setTimeout for this purpose.

$('#animatetransport').addClass( "animated slideInLeft" );
setTimeout(function() {
  window.location.href = "industry/index.html";
}, 8000);

How to add a delay between cycles of css animation

You can do something like this.

0% { -webkit-transform:rotate(0deg) }
20% { -webkit-transform:rotate(360deg) }
100% { -webkit-transform:rotate(360deg) }

and change the duration of the rotation

-webkit-animation-duration: 6s;

So what you are doing is setting the animation to take 6's but moving the rotation to be quicker (20% is not correct for 5's wait but you can work it out). So the rotate happens and then it sits at 360deg for the remainder of the time.

Demo Here

---

Related Topics