CSSアニメーション02、
キーフレームについて。
〽️基本おさらい。 〽️途中で止めたい。 〽️fromとtoがない場合。 〽️複数のプロパティ。 〽️お疲れ様でした。
CSSアニメーション、作り方。
⬆︎CSSアニメーションについてのまとめページはこちら。
こんにちは、「ふ」です。
CSSアニメーション２回目、今回はkeyframeの性質について詳しく説明していきたいと思います。
記述の短縮化や、意図したようにCSSアニメーションが動いてくれない！といったときの参考にして下さい。
基本おさらい。
CSSアニメーションのキーフレームとは、「１つの動作の分岐点」を指すものでした。
例えば、「要素の背景色が変化していくCSSアニメーション」を実装したい場合、
キーフレームは始めと終わりの２箇所です。
CSS
基本はこのようにキーフレームを記述しました。
▶︎ 0%は「from」
100%は「to」。
キーフレームの「0%」は「from」、100%は「to」と指定することもできます。
このように書いても、先程と同様のアニメーションに成増。
「from」「to」を使うときに、途中で「%」表記をはさんでも構いません。
白からシアンに変わる途中、30%のところで一旦マゼンタに変わるCSSアニメーションを考えます。
CSS
見た目がちょっと気持ち悪い（笑）ですが、問題なくアニメーションします。
途中で止めたい。
先ほどのCSSアニメーションでは、30%のところで一旦マゼンタになり、そのあとシアンへと変化していきました。
では、変化したあとすぐにシアンに向かって変化するのではなく、
60%の時点までマゼンタの状態を保持。
それ以降にシアンへと変化させたいとしたら・・
60%のところに、30%のと同じキーフレームを打ちます。
CSS
30〜60%のあいだ、マゼンタの状態を保持することができています。
前後のキーフレームに置いてプロパティの値が全く同じであれば、その間アニメーションは実行されません。
さらに、同一のキーフレームを置く場合は、進捗部分をカンマで区切り、まとめて記述することができます。
これでも同様のCSSアニメーションが実行されます。
30と60のそれぞれに「%」を付けるのを忘れないようにしてください。
ロリポップ！の取次店になりました。
fromとtoがない場合。
キーフレームのうち、from（0%）やto（100％）の記述がない場合。
アニメーションは規定のプロパティ値を「fromやtoの状態」として採用します。
例えば、要素が左端から右端へと移動するCSSアニメーションを作りたいとき。
margin-leftを使って操作するとします。
アニメーションを実装する前のCSS。つまり要素の「規定値」は、
だったとします。
CSS
左端にある状態ですね。
これにアニメーションを仕込むのですが、フツーだとこう書きます。
CSS
結果もフツーですね。
ここで。
キーフレームのうち、0%（from）の記述をカットしてみます。
CSS
同じようにアニメーションしました。
0%（from）がなくなったことで、規定値（margin-left：0)が「0%のキーフレームだ」と認識され、このような結果になったのです。
つまり。
⭐️ アニメーション開始の状態が規定値で問題ない場合、
0%（from）の記述を省略することができます ⭐️
逆に「from」残しで「to」を省略してみます。
CSS
なにも起こりません。100%のキーフレームが「規定値」とみなされたため、
ということになり、キーフレーム間の値が同一のためアニメーションされません。
今度は50%のキーフレームだけにしてみます。
こうなると「from」も「to」も、規定値を目指してアニメーションします。
CSS
結果として、
「 0%で左端→50%で右端→100%でまた左端 」
といったCSSアニメーションに成増。
複数のプロパティ。
キーフレームは複数のプロパティを扱うことができます。
規定値は、margin-leftが0、背景色を白とします。
0%から100%になるにつれ、要素が左から右へと移動。なおかつ背景色も白からシアンへと変化させる。
記述は通常のCSSのセレクタのように、プロパティと値を並べるだけです。
0%のキーフレームは規定値のままでよいので、省略しても構いません。
CSS
ちゃんと２つのプロパティがアニメーションしました。
今度は移動はそのまま、背景色は白からスタートし、50%でマゼンタ、100%でシアンになるCSSアニメーションにしてみます。
この場合、「移動」に必要なキーフレームは0%と100%の２つ、「変色」に必要なキーフレームは0%、50%、100%の３つです。
どのように指定すれば良いのでしょうか。
50%のキーフレームには「移動」に使うmarginプロパティは記述しませんでした。
CSS
そうするとmarginプロパティは記述されているフレーム、つまり「0％」と「100%」の値のみをもとにして、アニメーションを描画します。
一方「変色」に使うbackground-colorプロパティは、「0-50-100%」のキーフレームでアニメーションします。
それぞれのプロパティが、「自身の値が表記されているキーフレーム」のみを選んでアニメーションを構成してくれるのですね 🎵
さらにさらに。
移動はそのまま、変色は白スタート、50%でシアンになり、アニメーション終了までその状態を保つ、という場合。
先のセクションでお伝えしたように、この100%のときの「背景色：シアン」をちゃんと記述しておくようにしましょう。
CSS
でないと、50%以降は規定値の「背景色：白」に向かってアニメーションしてしまいます。注意してください。
お疲れ様でした。
最後までお読みいただきありがとうございました。
今回はCSSアニメーションのキーフレームについて紹介してきました。後半はやや複雑になってしまいましたね💧 ここはちょっと辛いところですが、少しずつ慣れていきましょう。
扨（さて）次回からはCSSアニメーションのプロパティについて、詳しく探っていきたいと思います。ではまた〜 ♩
CSSアニメーション03、プロパティ概要と一括指定について。
CSSアニメーション04、animation-delay。
flex-grow,flex-shrinkについて〜flexプロパティ前編。
SVGアニメーション、作り方。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。