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

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





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

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

実はtimimg-functionを使って、

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

steps。


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

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

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




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

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

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

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

 ■ linear

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





 ■ steps(4, jump-none)

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

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

先程の構文、

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

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


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

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

4種類の状態。


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

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

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

 ① jump-none。


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

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

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

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

 ② jump-start。


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

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

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

 ③ jump-end。


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

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

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

 ④ jump-both。


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

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

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

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

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

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


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

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

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


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

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

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

!?
分割は「4」のはずが、8分割のステップアニメーションになりました。

この章のはじめで述べたとおり、それぞれの「キーフレーム間」が指定された区間数で分割されているのです。
サンプルでは区間数「4」、キーフレーム間隔は2つなので、合計8分割のステップになった、ということです。

単一のプロパティ変化であっても、同じ現象が起こります。

#sample3 { animation:sample3 4s steps(4,jump-start) infinite; } @keyframes sample3 { bbfrom { width:0%; } bbto { width:100%; } }

これ⬆︎は1つのプロパティ、widthが0→100%に変化するキーフレームですが、ここに敢えて50%のキーフレームを打ってみましょう⬇︎。

@keyframes sample3 { bbfrom { width:0%; } bb「「150% { width:50%; }」」 bbto { width:100%; } }

キーフレームが3つ、つまり「キーフレーム間」が2箇所になりました。
したがって、ステップの区間数は2x4の8分割という結果に成増。



そして。

animation-timing-functionの全ての値は、「キーフレーム間」に対して適用されます
SVGアニメーション全体の時間に対して、ではありません。

試しに先程の「敢えて50%を打った」キーフレームで、他のtiming-function値を指定してみましょう。

animation-timing-function:「「1ease-in」」;
animation-timing-function:「「1cubic-bezier(0,0.8,0.4,1)」」;

キーフレーム50%の位置で進捗の度合いが切り替わっています。
それぞれの「キーフレーム間」ごとに、timing-functionが割り当てられているのがわかりますね。


意図したCSSアニメーションが実装できるよう、キーフレームの数には注意してください。

引き出しにしまっておこう。


これまで3記事にわたり、animation-timing-functionについて紹介してきました。
マニアックな関数もいくつか登場し、「こんなん、どこで使うねん!」というものもありました。
だけど。
普段あまり使わなくても、ここぞという時のために、あなたのスキルの引き出しにしまっておいてください。webアニメーションのスキルが極まっていったとき、きっと役に立つはずです。

お読み下さってありがとうございました。
引き続き一緒に、CSSアニメーションを学んでいきましょう!ではまた〜 ♫



CSSアニメーション、発火のタイミングを制御する。

〽️ 好きなタイミングで発火/消火。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。