CSSアニメーション02、
キーフレームについて。

〽️基本おさらい。 〽️途中で止めたい。 〽️fromとtoがない場合。 〽️複数のプロパティ。 〽️お疲れ様でした。





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

こんにちは、「ふ」です。
CSSアニメーション2回目、今回はkeyframeの性質について詳しく説明していきたいと思います。

記述の短縮化や、意図したようにCSSアニメーションが動いてくれない!といったときの参考にして下さい。

基本おさらい。


CSSアニメーションのキーフレームとは、「1つの動作の分岐点」を指すものでした。


例えば、「要素の背景色が変化していくCSSアニメーション」を実装したい場合、
キーフレームは始めと終わりの2箇所です。



#sample { animation-name:「「5animation-1」」; animation-duration:5s; animation-iteration-count:infinite; } 「「1@keyframes 「「5animation-1」」 { bb0% { background-color:#fff; } bb100% { background-color:#00aeef; } }」」

CSS

基本はこのようにキーフレームを記述しました。

 ▶︎ 0%は「from」
 100%は「to」。


キーフレームの「0%」は「from」、100%は「to」と指定することもできます。

@keyframes animation-1 { bb「「1from」」 { background-color:#fff; } bb「「1to」」 { background-color:#00aeef; } }

このように書いても、先程と同様のアニメーションに成増。

「from」「to」を使うときに、途中で「%」表記をはさんでも構いません。
白からシアンに変わる途中、30%のところで一旦マゼンタに変わるCSSアニメーションを考えます。



@keyframes animation-1 { bbfrom { background-color:#fff; } bb「「130% { background-color:#E4007F; }」」 bbto { background-color:#00aeef; } }

CSS

見た目がちょっと気持ち悪い(笑)ですが、問題なくアニメーションします。

途中で止めたい。


先ほどのCSSアニメーションでは、30%のところで一旦マゼンタになり、そのあとシアンへと変化していきました。

では、変化したあとすぐにシアンに向かって変化するのではなく、
60%の時点までマゼンタの状態を保持。
それ以降にシアンへと変化させたいとしたら・・





60%のところに、30%のと同じキーフレームを打ちます。

@keyframes animation-1 { bbfrom { background-color:#fff; } bb「「130% { background-color:#E4007F; }」」 bb「「160% { background-color:#E4007F; }」」 bbto { background-color:#00aeef; } }

CSS

30〜60%のあいだ、マゼンタの状態を保持することができています。
前後のキーフレームに置いてプロパティの値が全く同じであれば、その間アニメーションは実行されません。

さらに、同一のキーフレームを置く場合は、進捗部分をカンマで区切り、まとめて記述することができます。

@keyframes animation-1 { bbfrom { background-color:#fff; } bb「「130%,60% { background-color:#E4007F; }」」 bbto { background-color:#00aeef; } }

これでも同様のCSSアニメーションが実行されます。
30と60のそれぞれに「%」を付けるのを忘れないようにしてください。

fromとtoがない場合。


キーフレームのうち、from(0%)やto(100%)の記述がない場合。
アニメーションは規定のプロパティ値を「fromやtoの状態」として採用します。

例えば、要素が左端から右端へと移動するCSSアニメーションを作りたいとき。
margin-leftを使って操作するとします。

アニメーションを実装する前のCSS。つまり要素の「規定値」は、

#sample { 「「1margin-left:0%」」 }

だったとします。

CSS

左端にある状態ですね。
これにアニメーションを仕込むのですが、フツーだとこう書きます。

#sample { margin-left:0%; animation-name;sample-2; anmation-duration:5s; animation-iteration-count:infinite; } 「「1@keyframes sample-2 { bb0% { margin-left:0%; } bb100% { margin-left:60%; } }」」 「「3*margin-leftの値はテキトーに調整しています。」」

CSS

結果もフツーですね。

ここで。
キーフレームのうち、0%(from)の記述をカットしてみます。

@keyframes sample-2 { bb「「1<!--100%のみにする-->」」 bb100% { margin-left:60%; } }

CSS

同じようにアニメーションしました。

0%(from)がなくなったことで、規定値(margin-left:0)が「0%のキーフレームだ」と認識され、このような結果になったのです。


つまり。

⭐️ アニメーション開始の状態が規定値で問題ない場合、
0%(from)の記述を省略することができます ⭐️

逆に「from」残しで「to」を省略してみます。

@keyframes sample-2 { bb「「1<!--fromのみにする-->」」 bbfrom { margin-left:0%; } }

CSS

なにも起こりません。100%のキーフレームが「規定値」とみなされたため、

from { margin-left:0%; } to { margin-left:0%; }

ということになり、キーフレーム間の値が同一のためアニメーションされません。

今度は50%のキーフレームだけにしてみます。

@keyframes sample-2 { bb「「1<!--50%のみにする-->」」 bb50% { margin-left:60%; } }

こうなると「from」も「to」も、規定値を目指してアニメーションします。

CSS

結果として、

 「 0%で左端→50%で右端→100%でまた左端 」

といったCSSアニメーションに成増。

複数のプロパティ。


キーフレームは複数のプロパティを扱うことができます。

#sample { 「「1background-color:#fff;」」 「「4margin-left:0%;」」 }

規定値は、margin-leftが0、背景色を白とします。

0%から100%になるにつれ、要素が左から右へと移動。なおかつ背景色も白からシアンへと変化させる。

記述は通常のCSSのセレクタのように、プロパティと値を並べるだけです。

#sample-3 { animation-name:sample-3; animation-duration:5s; animation-iteration-count:infinite; } @keyframes sample-3 { bb0% { 「「1background-color:#fff;」」 「「4margin-left:0%;」」 } bb100% { 「「1background-color:#00aeef;」」 「「4margin-left:60%;」」 } }

0%のキーフレームは規定値のままでよいので、省略しても構いません。

CSS

ちゃんと2つのプロパティがアニメーションしました。

今度は移動はそのまま、背景色は白からスタートし、50%でマゼンタ、100%でシアンになるCSSアニメーションにしてみます。

この場合、「移動」に必要なキーフレームは0%と100%の2つ、「変色」に必要なキーフレームは0%、50%、100%の3つです。
どのように指定すれば良いのでしょうか。

@keyframes sample-3 { bb0% { 「「1background-color:#fff;」」 「「4margin-left:0%;」」 } bb50% { 「「3/*変色のみ記述*/」」 「「1background-color:#E4007F;」」 } bb100% { 「「1background-color:#00aeef;」」 「「4margin-left:60%;」」 } }

50%のキーフレームには「移動」に使うmarginプロパティは記述しませんでした。

CSS

そうするとmarginプロパティは記述されているフレーム、つまり「0%」と「100%」の値のみをもとにして、アニメーションを描画します。
一方「変色」に使うbackground-colorプロパティは、「0-50-100%」のキーフレームでアニメーションします。

それぞれのプロパティが、「自身の値が表記されているキーフレーム」のみを選んでアニメーションを構成してくれるのですね 🎵

さらにさらに。
移動はそのまま、変色は白スタート、50%でシアンになり、アニメーション終了までその状態を保つ、という場合。

@keyframes sample-3 { bb0% { 「「1background-color:#fff;」」 「「4margin-left:0%;」」 } bb50% { 「「1background-color:#00aeef;」」 } bb100% { /* これ⬇︎をちゃんと記述!! */ 「「1background-color:#00aeef;」」 「「4margin-left:60%;」」 } }

先のセクションでお伝えしたように、この100%のときの「背景色:シアン」をちゃんと記述しておくようにしましょう。

CSS

でないと、50%以降は規定値の「背景色:白」に向かってアニメーションしてしまいます。注意してください。

お疲れ様でした。


最後までお読みいただきありがとうございました。
今回はCSSアニメーションのキーフレームについて紹介してきました。後半はやや複雑になってしまいましたね💧 ここはちょっと辛いところですが、少しずつ慣れていきましょう。

扨(さて)次回からはCSSアニメーションのプロパティについて、詳しく探っていきたいと思います。ではまた〜 ♩













「ふ」です。

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