CSSアニメーション01、
基本的なアニメーションの実装。

〽️どうなっているのか。 〽️最低限の記述。 〽️実装してみる。 〽️お疲れ様でした。





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

こんにちは、「ふ」です。
今回から何記事かに渡り、CSSアニメーションの基本について解説していこうと思います。

JavaScriptの知識がなくても、手軽にに動きをつけてwebサイトを彩ることのできるCSSアニメーション。最終的には、書籍やネット上にあるCSSアニメーションのチュートリアルを自己流にアレンジしたり、0からの自作アニメーションを構築できるようになっていただけたら、と思っています。

そのためにはまづ、CSSアニメーションの基本についてじっくりと理解を深めましょう。
なるべくていねいに紹介していこうと思っていますので、ぜひ学んでいってください。

第1回目はCSSアニメーションの仕組みと、ごくシンプルなアニメーションを実装していきます。



次回記事はコチラ⬆︎。

どうなっているのか。


そもそもCSSアニメーションの仕組みは、どのようになっているのでしょうか?

サンプル要素⬆︎を使って見ていきましょう。



#sample { background-color:white; ...① }

現在、背景色を白にしています。
変更してみましょう。

#sample { background-color:#00aeef; ...② }

背景色が変更されました。

①と②について。
当然ですが、値を指定した段階で瞬間的に表示が変更されます。

ここにCSSアニメーションを実装すると、プロパティを「時間の経過とともに段階的に変化させる」ことができます。

ブラウザは指定した時間に応じて、プロパティの変化前/後を補完するように描画してくれます。

これがCSSアニメーションの仕組みです。

また、アニメーションの分岐点となる、

背景色:白の状態と
背景色:青(シアン)の状態

キーフレームと呼びます。 ←テストに出ます。

今の例でいくと、キーフレームは始めと終わりの2つですね。

アニメーションが複雑になってくると、動作単位ごとにキーフレームを配置することに成増。
「キーフレーム」という用語は、モーショングラフィック全般で使われているワードです。覚えておくと良いことがあるよ🎵

最低限の記述。


CSSアニメーションを実装する際に、最低限必要な情報は次の通りです。

① アニメーション名

② 継続時間

③ キーフレーム(変化させるCSSプロパティの内容)

 ① アニメーション名
 animation-name。

セレクタ外部に記述される「キーフレーム」を呼び出すためのプロパティです。
名前については、1部の例外を除けば自由につけることができます。仮に「animation-1」とした場合の記述例。

#sample { 「「1animation-name:animation-1;」」 }

このように書きます。キーフレームとの関係はこのあとお話しします。

 ② 継続時間
 animation-duration。

アニメーションが始まってから終了するまでの時間を指定します。単位はs(秒)またはms(1/1000秒)で指定することができます。

 記述例:

#sample { animation-name:animation-1; 「「1animation-duration:4s;」」 }

 ③ 変化させる内容
 @keyframes。

キーフレームはCSSアニメーションにおける、具体的なプロパティ値の変化を記述する場所です。
CSSアニメーションではアニメーション名やタイミングに関するもの(継続時間や繰り返しの度合いなど)は対象の要素セレクタ内に記述しますが、具体的なプロパティの変化内容については、要素セレクタの外部に@規則で記述することになっています。

 記述例:

#sample { animation-name:animation-1; animation-duration:4s; } 「「1@keyframes 「「5animation-1」」 {」」 bb「「3/*内容*/」」 bb「「1}」」

「@keyframes」の後には先ほど指定したアニメーション名を記述します。これにより、要素セレクタとキーフレームを紐付けます

この中に具体的なキーフレームとタイミングを記述していきます。

全体に対する進捗(%) { プロパティ:値 }

キーフレームを指定したいタイミングは、全体の継続時間に対する進捗度(0〜100%)で表現します。
その中に状態を示す、CSSのプロパティと値を記述。

例をあげてみます。
始まりが背景色:白で、終了時が背景色:シアンにしたい。
この場合キーフレームは、最初と最後の2つ必要ですね?

@keyframes animation-1 { 0% { background-color:#fff; } 100% { background-color:#00aeef; } }

このように記述します。

今度は「はじめはシアン、中間地点でいったん白になり、最終的にマゼンタになる」というもの。

キーフレームは3つ。

@keyframes animation-1 { 0% { background-color:#00aeef; } 50% { background-color:#fff; } 100% { background-color:#E4007F; } }

始まり(0%)と終わり(100%)以外は、好みのタイミングでキーフレームを打つことができます。

実装してみる。


では実際にコードを書いて実装してみましょう。
要素の背景色が白からシアンに、というのをやってみたいと思います。

〜とその前に。

 ・繰り返し回数
 animation-iteration-count。

先ほど3つの情報「アニメーション名、継続時間、キーフレーム」。これだけあればCSSアニメーションは実装できる、とお話ししました。
が、この3つだけではアニメーションは1度きりしか再生されません。プレビューしやすいよう、繰り返し再生を指定しましょう。それにはanimation-iteration-countプロパティを用います。

animation-iteration-count:「「5infinite」」;

値には「1」や「3」などの整数値が使えますが、「永遠に繰り返し」たい場合には「infinite」を指定します。今回はこれでいきましょう。

気を取り直して、コードを書いていきます。

■ HTML

<body>

CSSアニメイション。

</body>

■ CSS

#sample { 「「3/*基本スタイル、お好みでどーぞ。*/」」 font-size:2em; border:solid 2px; border-radius:0.5em; width:40%; margin:0 auto; text-align:center; 「「3/*アニメーションの指定*/」」 「「1animation-name:animation-1; animation-duration:2.5s; animation-iteration-count:infinite;」」 } 「「3/*キーフレーム*/」」 @keyframes animation-1 { 「「10% { background-color:white; } 100% { background-color:#00aeef; }」」 }

CSSアニメイション。

結果はこの⬆︎ように。

うまくいきましたか?
これで、アニメーターもしくはモーショングラフィッカー?の仲間入りですね!

お疲れ様でした。


最後までお読みくださり、ありがとうございました。
ひとまづはシンプルなアニメーションが実装できました。プロパティや継続時間を書き換えて、色々と実験してみてください。

今回は「理解」を優先させたかったので、あえてベタな記述法でコードを紹介しました。
本当は省略などを使った、実用的な記述がCSSアニメーションには用意されています。次回以降紹介していきますね、お楽しみに。
ではまた〜 🎵



SVGアニメーション、 回転スワイプで画像切り替え。

2021.02.27
ポイントは「2重クリップ」。



HTMLで画像を重ねる、便利な方法。

2021.01.20
positionやz-index指定なし。


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

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












「ふ」です。

swift、web、ベクター/モーショングラフィックなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。