cssのanimationのstepで少し躓いたのでまとめておく

意外と複雑な仕組みだったので備忘録

.active {
    animation: blink 1.0s steps(2) infinite
}
@keyframes blink {
    0% {background: white;}
    100% {background: black;} 
}

例えばこのようなものを考えると，背景は黒にはならない。
ここでのstepsの2は2分割を表しているが，この2分割は0%-50%と50%-100%の区間で分割することを表している。
そして，この区間はそれぞれ0%,50%の値を用いる。
これはstepsの第二引数のデフォルトがendだからである。
(すなわち第二引数をstartにすると50%と100%の値を用いることになる)

話がずれたがどうすれば良いかというと，50%を用いるならここにblackを持ってくれば良い。

.active {
    animation: blink 1.0s steps(2) infinite
}
@keyframes blink {
    0% {background: white;}
    50% {background: black;} 
}

しかしこれは動かない。正確には動くけどちょっと違う。コマ送りが多い。
なぜこんなことになるかというと，どうやらキーフレームを置く場所で分割しようとするみたいだ。
すなわち50%に置いたことで0-50，50-100をそれぞれ2分割しようとする。つまり
0,25,50,75の値が繰り返されることになる。これは望んだ動作ではない。
2分割しなければ良いので，stepsを1に変えれば良い。すなわち

.active {
    animation: blink 1.0s steps(1) infinite
}
@keyframes blink {
    0% {background: white;}
    50% {background: black;} 
}

で良いことになる。

(ドキュメントにstepsの初期値が書いていないのはなぜ)