Repeat Animation Every 3 Seconds

Repeat animation every 3 seconds

With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.

In the below snippet, the following is what is being done:

• The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
• For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
• For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
• For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
• The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.

div{

  height: 100px;

  width: 100px;

  border: 1px solid;

  animation: move 6s infinite forwards;

}

@keyframes move{

  0% { transform: translateY(0px);}

  50% { transform: translateY(0px);}

  75% { transform: translateY(50px);}

  100% { transform: translateY(0px);}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div>Some content</div>

CSS: repeat animation every 30 seconds

You can do like this, where you set it to infinite, make it a 30 sec animation but do the full spin at the first 5% of the 30 sec.

img {

  width: 100px;

  height: 100px;

}

.imageRotateHorizontal{

  animation: spinHorizontal 30s linear infinite;

}

@keyframes spinHorizontal {

  0% { 

    transform: rotateY(0deg); 

  }

  5% {

    transform: rotateY(360deg);

  }

  100% {

    transform: rotateY(360deg);

  }

}

<div style="width: 200px">

  <img id='imageLoading' class='imageRotateHorizontal' src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Gold_coin_icon.png" />

</div>

how to make CSS animation to play every 10 seconds

You can change the keyframes to show animation twice. First from 0% to 20% and next from 20% to 40%, then let it stay like that till 100%. Now change animation-duration to 5s with no animation-delay

  #countText {
      -webkit-animation-name: color2;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-delay: 0s;
  }
  @-webkit-keyframes color2 {
      0% {
      }
      5%,25% {
          text-shadow: -2px -5px 10px #fb0017,
                       -5px 0px 10px #3a00cd,
                       -5px 5px 10px #00ff3a;
      }
      15%,35% {
          text-shadow: 2px 5px 10px #fb0017,
                       5px 0px 10px #3a00cd,
                       5px -5px 10px #00ff3a;
      }
      40% {
        text-shadow: none;
    }
}

Demo

Run animation every 5 seconds/interval

You can do it with pure CSS, no JS/jQuery needed. In order to accomplish this, I set the animation-duration to 5 seconds, then multiplied all percentage values by 0.2 (because 1 second out of 5 seconds => 20%). Then translate back to 0px after the highest percentage value. And voilà, shaking every 5 seconds:

.shk {

    transform: translate3d(0, 0, 0);

    backface-visibility: hidden;

    animation-name: shakeMe;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}

@keyframes shakeMe {

    2%, 18% {

        transform: translate3d(-5px, 0, 0);

    }

    4%, 16% {

        transform: translate3d(5px, 0, 0);

    }

    6%, 10%, 14% {

        transform: translate3d(-5px, 0, 0);

    }

    8%, 12% {

        transform: translate3d(5px, 0, 0);

    }

    

    18.1% {

        transform: translate3d(0px, 0, 0);

    }

}

<div class="shk">Shake me</div>

How to make the animation run every x seconds

You can use setInterval() like this

index = 0;
function animate() {
    index++;
    console.log(index)
    //requestAnimationFrame(animate);
}

setInterval(function(){  
  animate();
}, 5000);

How to repeat an animation after few seconds?

Dvide time in @keyframes -- % also calculate the animation-duration= time you want the animation + time for waiting

as in this example the animation work in 1 first second (2s / 50%) then wait until 100%

 .hand {

    position: absolute;

    bottom: 30px;

    right: 900px;

  }

  .element {

    position: relative;

    top: 0;

    left: 0;

    animation-name: zigzag;

    animation-duration: 2s;

    animation-timing-function: ease-in;

  }

  .element-2 {

    animation-iteration-count: infinite;

    animation-direction: alternate;

  }

  @keyframes zigzag {

    0%{

      left: 0;

      top: 0;

    }

    50% {

      left: 0;

      top: 0;

    }

    100%{

      left: 50px;

      top: 20px;

    }

  }

 <div class="element element-2"><img class="hand" src="/images/career/hand.png"></div>

---

Related Topics