How to Make CSS Animation to Play Every 10 Seconds

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>

Adding 10 second pause to CSS animation

Edited:

.whoiam { 
    animation-duration: 40s; /* 4 x 10s */
    animation-delay: 10s;
}

h2 { animation-duration: 10s; }

@keyframes fade {
    0% {opacity: 0;} 
    10% {opacity: 1;} 
    100% {opacity:1;}
}

This is the full code (the pen) :

#container{

    overflow:hidden;

    height:48px;

}

.whoiam{

    -webkit-animation: move;

            animation: move;

    position:relative;

    -webkit-animation-duration: 40s;

            animation-duration: 40s;

    -webkit-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

    -webkit-animation-timing-function: step-start;

            animation-timing-function: step-start;

    -webkit-animation-delay: 10s;

            animation-delay: 10s;

}

h2{ height:48px;margin:0;padding:0}

@-webkit-keyframes move {

    0% { margin-top: 0em; }

    25% { margin-top: -48px; }

    50% {margin-top: -96px;}

    75% {margin-top: -144px; }

    100% {margin-top: 0;}

}

@keyframes move {

    0% { margin-top: 0em; }

    25% { margin-top: -48px; }

    50% {margin-top: -96px;}

    75% {margin-top: -144px; }

    100% {margin-top: 0;}

}

h2{

    -webkit-animation: fade;

            animation: fade;

    -webkit-animation-duration: 10s;

            animation-duration: 10s;

    -webkit-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

}

@-webkit-keyframes fade {

    0% { opacity: 0; filter:alpha(opacity=0); }

    10% { opacity: 1; filter:alpha(opacity=100); }

    100% { opacity: 1; filter:alpha(opacity=100); }

}

@keyframes fade {

    0% { opacity: 0; filter:alpha(opacity=0); }

    10% { opacity: 1; filter:alpha(opacity=110); }

    100% { opacity: 1; filter:alpha(opacity=100); }

}

<h1>Here's some stuff</h1>

<div id="container">

<div class='whoiam'>

  <h2>Florb</h2>

  <h2>Dongus</h2>

  <h2>Bizzlebrop</h2>

  <h2>Yoindle</h2>

</div>

</div>

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 skip to a specific time in css-animations by seconds?

Changing animation-delay will do exactly that.

When you change it to negative values, it will jump forward.

const selectElement = document.querySelector('.number');
selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.some-div');
  result.style.animationDelay = `${event.target.value}s`;
});

.some-div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 20s;
  animation-delay: 0;
}

@keyframes example {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(400px);
  }
}

<div class="some-div"></div>
<input type="number" class="number" />
<br/>
change the value in the input

CSS animation to repeat every nth second

An alternative to ccprog's svg SMIL approach might be using the Web Animations API

The keyframe animation can be translated to an animation object like this

let ani1 = animEl.animate(
  [{
    transform: "rotate(0deg)"
  }, {
    transform: "rotate(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1
  }
);

See also: MDN: Using the Web Animations API

Example

let animEl = document.querySelector(".rect1");

let ani1 = animEl.animate(
  [{
    transform: "rotate(0deg)"
  }, {
    transform: "rotate(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1
  }
);

let ani2 = animEl.animate(
  [{
    transform: "rotateX(0deg)"
  }, {
    transform: "rotateX(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1,
  }
);
// pause 2. animation
ani2.pause();

// chain animations
ani1.onfinish = function() {
  ani2.play();
};

ani2.onfinish = function() {
  ani1.play();
};

svg {
  border: 1px solid #ccc;
  display: block;
  width: 10em
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect class="rect1" id="r1" x="25" y="25" width="50" height="50" stroke="black" stroke-width="0.25" fill="orange" transform-origin="50 50" ></rect>
</svg>

---

Related Topics