CSSの背景を徐々に変える方法は無限になりますか？

Question

私のCSSは、（this penの助けを借りて）このように書きます：

div[class="heading"] { 
 
    animation: colorchange 50s; /* animation-name followed by duration in seconds*/ 
 
    /* you could also use milliseconds (ms) or something like 2.5s */ 
 
    -webkit-animation: colorchange 50s; /* Chrome and Safari */ 
 
} 
 

 
@keyframes colorchange 
 
{ 
 
    0% {background: #e55f5f;} 
 
    25% {background: yellow;} 
 
    50% {background: #55CE91;} 
 
    75% {background: #5fe5e5;} 
 
    100% {background: #ce71ae;} 
 
} 
 

 
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ 
 
{ 
 
    0% {background: #e55f5f;} 
 
    25% {background: yellow;} 
 
    50% {background: #55CE91;} 
 
    75% {background: #5fe5e5;} 
 
    100% {background: #ce71ae;} 
 
}

<div class="heading"> 
 
    <i class="fa fa-user"></i> Some Sample Text Here... 
 
</div>

すべてが、私は私のDIVの徐々に変化する色はサイクルになりたいことを除いて完全によく合います。それは、CSSからすべての色を表示しなければならなくなった後、途中で停止します。どのように私はそれを中断させることができますか？おかげで、すべての応答

Answer 1

のためにあなたのCSSでanimationにinfiniteを追加することができます。私はループを見て10秒待ちたくなかったので3秒製

div[class="heading"] { 
 
     animation: colorchange 3s infinite ; /* animation-name followed by duration in seconds*/ 
 
     /* you could also use milliseconds (ms) or something like 2.5s */ 
 
     -webkit-animation: colorchange 3s infinite ; /* Chrome and Safari */ 
 
    } 
 

 
    @keyframes colorchange 
 
    { 
 
     0% {background: #e55f5f;} 
 
     25% {background: yellow;} 
 
     50% {background: #55CE91;} 
 
     75% {background: #5fe5e5;} 
 
     100% {background: #ce71ae;} 
 
    } 
 

 
    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ 
 
    { 
 
     0% {background: #e55f5f;} 
 
     25% {background: yellow;} 
 
     50% {background: #55CE91;} 
 
     75% {background: #5fe5e5;} 
 
     100% {background: #ce71ae;} 
 
    }

<div class="heading"> 
 
    <i class="fa fa-user"></i> Some Sample Text Here... 
 
</div>