2ステップと遷移なしのCSSアニメーション

Question

私はcssアニメーションで要素の背景色を切り替えるために取り組んでいます。

このアニメーションは2つのフェーズであり、両方のフェーズ間の滑らかな遷移はありません。

アニメーションの最初の50％、背景色はblue、アニメーションの最後の50％は背景色がgreyとなり、間にトランジションはありません。それを行うための簡単な方法があります場合、私は思ったんだけど

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s linear infinite; 
 
} 
 

 
@keyframes bg { 
 
    0% { 
 
    background: blue; 
 
    } 
 
    50% { 
 
    background: blue; 
 
    } 
 
    50.00001% { 
 
    background: grey; 
 
    } 
 
    100% { 
 
    background: grey; 
 
    } 
 
}

<div></div>

：

はここで完全に動作するアニメーションです。私が探しているのは、と toだけを追加ステップなしで keyframesの中に使用することです。

Answer 1

animation-timing-function: steps(1)を使用して以下のスニペットで達成できます。 animation-timing-functionhereと、stepsの値hereの詳細については、MDNで確認できます。

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s steps(1) infinite; 
 
} 
 

 
@keyframes bg { 
 
    0% { 
 
    background: blue; 
 
    } 
 
    50% { 
 
    background: grey; 
 
    } 
 
}

<div></div>

注： I起因this answerで議論問題に50%代わりに100%でgrey色のキーフレームを設定しています。あなたはまた、ショートカット表記を使用することができます

Answer 2

：

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s linear infinite; 
 
} 
 

 
@keyframes bg { 
 
    from, 50% { 
 
    background: blue; 
 
    } 
 
    50.00001%, to { 
 
    background: grey; 
 
    } 
 
}

<div></div>