こんにちは、さち です。
先日、CSS でパカパカ点滅するアニメーションを作る方法についての記事を書いて、animation の steps() を使いました。
そのときに、steps() の仕様や使い方についても説明しようと思ったんですが、ちゃんと理解しようとすると奥が深くて、改めて別の記事（この記事）にまとめることにしました。
少しでもお役に立てれば幸いです。
steps(X, Y) の意味
【X】 「ステップ数」の効果
steps(X, Y) の X である「ステップ数」はアニメーションの「コマ数」を指定するものです。
効果を理解するために、次のようなサンプルアニメーションを作ってみました。
ソース
<div class="animation" style="--fn: steps(1, end);">1</div> <div class="animation" style="--fn: steps(2, end);">2</div> <div class="animation" style="--fn: steps(3, end);">3</div> <div class="animation" style="--fn: linear;">linear</div>
.animation {
animation: translate 4s;
animation-timing-function: var(--fn);
}
@keyframes translate {
0%{ translate: 0px; }
50%{ translate: 180px; }
100%{ translate: 0px; }
}
steps(X, Y) の Y は end で統一してあるので、X である「ステップ数（コマ数）」が 1 2 3 の3種類でどう変化するかを linear を比較しながら確認してみて下さい。
結果
「ステップ数」は、「キーフレーム」間を何コマでアニメーションするかを指定します。
今回のアニメーションには、「キーフレーム」が 0% 50% 100% の3個あります。
ステップ数を 3 にした場合、 0% 50% を3コマ、50% 100% を3コマでアニメーションします。つまり、アニメーション全体（ 0% ～ 100% ）は6コマになります。
ステップ数 3 は、アニメーション全体が3コマになるわけではありません。注意して下さい。
【Y】 「タイミング」の効果
steps(X, Y) の Y である「タイミング」は、アニメーションの「コマ」がどのタイミングの瞬間にするか指定するものです。
効果を理解するために、次のようなサンプルアニメーションを作ってみました。
ソース
<div class="animation" style="--fn: steps(3, start);">start</div> <div class="animation" style="--fn: steps(3, end);">end</div> <div class="animation" style="--fn: steps(3, jump-none);">none</div> <div class="animation" style="--fn: steps(3, jump-both);">both</div> <div class="animation" style="--fn: linear;">linear</div>
.animation {
animation: translate 4s;
animation-timing-function: var(--fn);
}
@keyframes translate {
0%{ translate: 0px; }
50%{ translate: 180px; }
100%{ translate: 0px; }
}
steps(X, Y) の X はすべて 3 で統一してあるので、Y である「タイミング」が start end jump-none jump-both の4種類でどう変化するのかを linear と比較しながら確認してみて下さい。
結果
start end jump-none jump-both の4種類で、それぞれアニメーションが異なるのが分かります。
見た目だけでは仕様（仕組み）が分かりにくいので、図で確認してみましょう。（薄い紫色の斜線は lenear の動きです）
start (jump-start)
start は jump-start の省略表記で、最後のコマは除外し、最初のコマとその他のコマで均等な値にジャンプします。
end (jump-end)
end は jump-end の省略表記であり、最初のコマは除外し、最後のコマとその他のコマで均等な値にジャンプします。
jump-none
jump-none は、最初と最後のコマを除外して、その他のコマで均等な値にジャンプします。
jump-both
jump-both は、最初と最後のコマも含めて、すべてのコマで均等な値にジャンプします。
コメント