2つの状態を切り替えるCSSアニメーション

Question

次のCSSアニメーションが赤と青の間で色の切り替えを起こさない理由を理解してください。タイミング関数として

div {animation: colorswitch 1s step-end infinite} 
 
@keyframes colorswitch {0% {color:red} 100% {color:blue}}

<div>text</div>

Iは直接最終の状態にジャンプすることになっているstep-endを指定します。しかし、それは動作しません。

Answer 1

色スイッチアニメーションの溶液です。

demo

div { 
    animation: colorswitch 1s step-end infinite; 
} 
@keyframes colorswitch { 
    0% {color:red} 
    50% {color:blue} 
} 

はまだそれがこのように振る舞うだ理由を理解しようとしています。

なぜ50％が機能しますか？

また、FOR-

@keyframes colorswitch { 
    0% {color:red} 
    50% {color:blue} 
    100% {color:blue} 
} 

は、無限に繰り返すことを試みるない理由末尾にまっすぐにジャンプすることになっていた場合、私は...混乱している

@keyframes colorswitch { 
    0% {color:red} 
    50% {color:blue} 
    100% {color:red} 
} 

Answer 2

ああ...私は問題があると思う。私はこれがあなたの後だったと思います。ここ

div { 
 
    font-size: 72px; 
 
    animation: colorswitch 1s step-end infinite; 
 
} 
 
@keyframes colorswitch { 
 
    0% { 
 
    color: red; 
 
    } 
 
    50% { 
 
    color: blue; 
 
    } 
 
}

<div> 
 
    text</div>