こんにちは、さち です。
先日、CSS でパカパカ点滅するアニメーションを作る方法について記事を書き、animation の steps() を使って実装しました。
そのときに、steps() の仕様や使い方についても説明しようと思ったんですが、ちゃんと理解しようとすると意外と奥が深く、改めてこの記事でまとめることにしました。
少しでもお役に立てれば幸いです。
そもそも steps() とは？
CSS アニメーションには、アニメーションの動き方を指定する animation-timing-function プロパティがあります。このプロパティで使える値の一つが steps() です。
steps() を使うと、「コマ送り」のようなアニメーションを作ることができます。
具体的にどんな動き（アニメーション）なのか見たい方は、こちらの記事を参照してみて下さい。
「コマ送り」を作るには、どれくらいの「コマ数」で、どの「タイミング」の状態を切り取るのか決めなくてはいけません。
steps() には、「コマ数」「タイミング」を決める方法が用意されています。思い通りのアニメーションを作るために、仕様を理解していきましょう。
steps(X, Y) の意味
【X】 コマ数
steps(X, Y) の X は、アニメーションの「コマ数」を指定します。
効果を理解するために、次のようなサンプルアニメーションを作ってみました。
ソース
<div class="animation steps1">1</div> <div class="animation steps2">2</div> <div class="animation steps3">3</div> <div class="animation linear">linear</div>
/* 共通のアニメーション設定 */
.animation { animation: translate 4s; }
/* ステップ数の違いと linear との比較 */
.steps1 { animation-timing-function: steps(1, end) }
.steps2 { animation-timing-function: steps(2, end) }
.steps3 { animation-timing-function: steps(3, end) }
.linear { animation-timing-function: linear }
/* アニメーションの内容 */
@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コマになります。
図を作ってみたので、こちらでも確認してみて下さい。（薄い紫色の斜線は linear の動きです）
steps(1, end)
キーフレーム（紫色の丸）の間を「1コマ」のアニメーションで描画します。
steps(2, end)
キーフレーム（紫色の丸）の間を「2コマ」のアニメーションで描画します。
steps(3, end)
キーフレーム（紫色の丸）の間を「3コマ」のアニメーションで描画します。
【Y】 タイミング
steps(X, Y) の Y は、アニメーションの「コマ」がどの「タイミング」の瞬間を切り取ったものかを指定します。
効果を理解するために、次のようなサンプルアニメーションを作ってみました。
ソース
<div class="animation start">start</div> <div class="animation end">end</div> <div class="animation none">none</div> <div class="animation both">both</div> <div class="animation linear">linear</div>
/* 共通のアニメーション設定 */
.animation { animation: translate 4s; }
/* タイミングの違いと linear との比較 */
.start { animation-timing-function: steps(3, start) }
.end { animation-timing-function: steps(3, end) }
.none { animation-timing-function: steps(3, jump-none) }
.both { animation-timing-function: steps(3, jump-both) }
.linear { animation-timing-function: linear }
/* アニメーションの内容 */
@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種類で、それぞれアニメーションが異なるのが分かります。
見た目だけでは仕様（仕組み）が分かりにくいので、図で確認してみましょう。（薄い紫色の斜線は linear の動きです）
start (jump-start)
start は jump-start の省略表記で、最後のコマは除外し、最初のコマとその他のコマで均等な値にジャンプします。
end (jump-end)
end は jump-end の省略表記であり、最初のコマは除外し、最後のコマとその他のコマで均等な値にジャンプします。
jump-none
jump-none は、最初と最後のコマを除外して、その他のコマで均等な値にジャンプします。
jump-both
jump-both は、最初と最後のコマも含めて、すべてのコマで均等な値にジャンプします。
コメント