CSSアニメーション、
steps( )でコマ送り動画。

〽️steps。〽️４種類の状態。〽️全てのfunctionが、キーフレームごとに割り当てられる。〽️引き出しにしまっておこう。

CSSアニメーション、作り方。

2020.04.17
webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

こんにちは、「ふ」です。
前回前々回とCSSアニメーションのanimation-timimg-functionについて紹介してきました。しかしまだお伝えしたいことがあります。

実はtimimg-functionを使って、

のアニメーションを作ることができるんです。
今回はsteps（）という値の使い方について紹介していきます。楽しいのでみなさんも試してみてください。

steps。

CSSアニメーションをコマ送りにするには、animation-timing-functionの値にsteps（）を指定します。

animation-timing-function:「「１steps(区間の数、階段の状態) 」」;

サンプル⬆︎は、ボール状の要素が左から右へと移動するCSSアニメーションです。

#sample { animation:ido 4s infinite; animation-timing-function:「「１linear」」; }

現在animation-timing-functionは「linear（終始一定）」が指定されています。
値をsteps（）にしてみましょう。

animation-timing-function:「「１steps(4,jump-none)」」;

いきなりアニメーションが、「コマ送り」になりました ♫
〜時間と進捗の関係をみてみましょう。

　■ linear

「linear」が連続的に進捗しているのに対し、

　■ steps(4, jump-none)

「steps」のほうは区間ごとに段階的に変化しています。

これは階段関数（step-function）と呼ばれるものです。見た目がまさしく階段のようになっていますね。

先程の構文、

animation-timing-function:steps(区間の数、階段の状態)

において、（）内の１つ目「区間の数」は、「キーフレーム間を何段階に区切るか」を指定します。さっきの例では「4」にしていたので、４分割のコマ送りになっていました。
ではもう１つの「階段の状態」とは何なのでしょうか？これには４通りの指定値が存在します。

　① jump-none
　② jump-start
　③ jump-end
　④ jump-both

〜次のセクションで１つづつ見ていきましょう。

４種類の状態。

steps( )は、CSSアニメーションが階段状に進捗していくtiming-functionです。
ただ一口に「階段」と言っても、

　・１段目を上がるところから始めるのか？
　・階段を昇る前の「床の状態」から始めるのか？
　・階段を「昇りきった」ところで終了するのか？

〜など、いろいろなケースが考えられます。
それを指定してやるのが、「階段の状態」というパラメータです。

　① jump-none。

animation-timing-function:steps(「「１4,jump-none」」);

さっきのサンプルでは区間数「４」、階段の状態は「jump-none」としていました。

階段の状態を見てみます。
１つ目の時間的区間では「階段を上がる前の床」、進捗で言うと、0%の状態が表示されます。
最後の区間では、「階段を上がり切った床」、進捗100%の状態が表示されます。

0%と100%の状態を表示しつつ、その間が段階的に進捗しています。

　② jump-start。

animation-timing-function:steps(「「１4,jump-start」」);

jump-startの階段は、「いきなり１段目を昇る」ところからスタートします。
その後も同様に、時間的区間のスタート時に次の１段へと「ジャンプ」していきます。最後の区間は「階段を上がり切った床」、アニメーション終了の状態が表示されます。

したがってアニメーション中、進捗100%の状態は表示されますが、0%の状態は（ジャンプしてしまうため）表示されないことに成増。

　③ jump-end。

animation-timing-function:steps(「「１4,jump-end」」);

jump-endは、「階段を上がる前の床」の状態から始まり、１つの時間的区間が終わるタイミングで、次の段に「ジャンプ」します。
最後の区間でジャンプした瞬間アニメーションは終了してしまうので、進捗0%の状態は表示されますが、100%の状態はアニメーション中は表示されません。

②のjump-startとは逆の状態ですね。

　④ jump-both。

animation-timing-function:steps(「「１4,jump-both」」);

jump-both、これは特殊です。
第１区間ではjump-startのように、区間のスタート時に次の段にジャンプ。最終区間ではjump-endと同じく区間終了時にジャンプ。

その条件を満たしつつ、指定された「区間数」に応じてステップが等間隔に割り当てられます。

結果、進捗0%と100%が表示されない状態でCSSアニメーションがステップします。

ここまで同じ区間数「4」で試してきました。「階段の状態」によって、中間に割り当てられる進捗のポイントも変わってきます。知っておいてください。

全てのfunctionが、キーフレームごとに割り当てられる。

１つ注意したいこと。
steps( )は、「キーフレームが変わるごとに区間が分割される」という点です。

これまでのanimation-timing-functionのサンプルは、0%と100%の２つのキーフレームからなるものを使ってきました。
では３つのキーフレームで構成されるCSSアニメーションに対して、steps( )を指定してみます。

サンプル⬆︎は、0~50%でwidthが広がっていき、50〜100％で透明になっていくというCSSアニメーションです。現在timing-functionは「linear」にしています。

#sample2 { animation:sample2 4s 「「１linear」」 infinite; } @keyframes sample2 ｛ bbfrom { opacity:1; width:0%; } bb50% { opacity:1; width:100%; } bbto { opacity:0; width:100%; } ｝

animation-timing-functionを４分割のstepsに変更してみます⬇︎。

#sample2 { animation:sample2 4s 「「１steps(4,jump-start)」」 infinite; }