CSSのアニメーションのループを作成する

Question

次のコードを使用して、CSSアニメーションを使用して要素の背景色を変更しています。ループを連続的にするためにこれを変更する方法はありますか？

#circle { 
     animation: colorchange 10s; 
     -webkit-animation: colorchange 10s; 
    } 

    @keyframes colorchange 
    { 
     0% {background: red;} 
     25% {background: yellow;} 
     50% {background: blue;} 
     75% {background: green;} 
     100% {background: red;} 
    } 

    @-webkit-keyframes colorchange 
    { 
     0% {background: red;} 
     25% {background: yellow;} 
     50% {background: blue;} 
     75% {background: green;} 
     100% {background: red;} 
    } 

Answer 1

次のようにあなたの#circleのdivのCSSブロックにanimation-iteration-count: infinite;を追加する必要があります

#circle { 
    animation: colorchange 10s; 
    -webkit-animation: colorchange 10s; 
    animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite; 
} 

アニメーション反復-countプロパティは、アニメーションを再生する回数を指定します。

Answer 2

あなたは使用する必要があります。

animation-iteration-count: infinite; 

Answer 3

をあなたはanimation documentationで見てみる場合は、反復の数を示すことができます。

プロパティーは、animation-iteration-countまたはanimationの定義です。

#circle { 
 
    width:100px; 
 
    height:100px; 
 
    animation: colorchange 10s infinite; 
 
    -webkit-animation: colorchange 10s infinite; 
 
} 
 

 
@keyframes colorchange 
 
{ 
 
    0% {background: red;} 
 
    25% {background: yellow;} 
 
    50% {background: blue;} 
 
    75% {background: green;} 
 
    100% {background: red;} 
 
} 
 

 
@-webkit-keyframes colorchange 
 
{ 
 
    0% {background: red;} 
 
    25% {background: yellow;} 
 
    50% {background: blue;} 
 
    75% {background: green;} 
 
    100% {background: red;} 
 
}

<div id="circle"></div>