Make css animation to run infinitely

Question

Having this html/css snippet:

.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }

<div class="triangle-four"></div>

I want to make it run infinitely and tried to do it like this:

 animation-duration: 4s infinite;

It doesn't work, the animation is not working anymore even thought this is what is recommended to do on w3schools.

Any ideas?

score 1 · Answer 1 · answered Dec 28 '20 at 18:48

I remove animation-name: example; animation-duration: 4s; and add this animation: example 5s infinite; it will fix your problem.

another solution it just to add this without removing anything :

animation-iteration-count: infinite;

.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
  animation: example 5s infinite;
}

@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
  }

<div class="triangle-four"></div>

Xenova · Answer 2 · 2020-12-28T18:54:03.477

Adding the following css should fix it:

 animation-duration: 4s;
 animation-iteration-count: infinite;

.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }

<div class="triangle-four"></div>

Of course, the end of the animation "jumps" to red, but that is the effect described by your animation. If that was not intended, you can simply add this css:

animation-direction: alternate;

score 0 · Answer 3 · answered Dec 28 '20 at 18:46

On the link provided, it says that the animation property is a shorthand for multiple animation properties.

You have to specify the animation-name and the animation-duration. You may then add the animation-iteration-count.

.triangle-four {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid rgb(20, 97, 27);
  margin-top: -120px;
  animation: 4s example infinite;
}

@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }

<div class="triangle-four"></div>

score 0 · Answer 4 · answered Dec 28 '20 at 18:50

0

just add

animation-iteration-count: infinite;

it will solve the issue

answered Dec 28 '20 at 18:50

Roohullah Kazmi

337
3
14

Make css animation to run infinitely

4 Answers4