CSSアニメーション01、
基本的なアニメーションの実装。
〽️どうなっているのか。 〽️最低限の記述。 〽️実装してみる。 〽️お疲れ様でした。
CSSアニメーション、作り方。
⬆︎CSSアニメーションについてのまとめページはこちら。
こんにちは、「ふ」です。
今回から何記事かに渡り、CSSアニメーションの基本について解説していこうと思います。
JavaScriptの知識がなくても、手軽にに動きをつけてwebサイトを彩ることのできるCSSアニメーション。最終的には、書籍やネット上にあるCSSアニメーションのチュートリアルを自己流にアレンジしたり、0からの自作アニメーションを構築できるようになっていただけたら、と思っています。
そのためにはまづ、CSSアニメーションの基本についてじっくりと理解を深めましょう。
なるべくていねいに紹介していこうと思っていますので、ぜひ学んでいってください。
第１回目はCSSアニメーションの仕組みと、ごくシンプルなアニメーションを実装していきます。
CSSアニメーション02、キーフレームについて。
次回記事はコチラ⬆︎。
どうなっているのか。
そもそもCSSアニメーションの仕組みは、どのようになっているのでしょうか？
サンプル要素⬆︎を使って見ていきましょう。
現在、背景色を白にしています。
変更してみましょう。
背景色が変更されました。
①と②について。
当然ですが、値を指定した段階で瞬間的に表示が変更されます。
ここにCSSアニメーションを実装すると、プロパティを「時間の経過とともに段階的に変化させる」ことができます。
ブラウザは指定した時間に応じて、プロパティの変化前/後を補完するように描画してくれます。
これがCSSアニメーションの仕組みです。
また、アニメーションの分岐点となる、
背景色：白の状態と
背景色：青（シアン）の状態
をキーフレームと呼びます。 ←テストに出ます。
今の例でいくと、キーフレームは始めと終わりの２つですね。
アニメーションが複雑になってくると、動作単位ごとにキーフレームを配置することに成増。
「キーフレーム」という用語は、モーショングラフィック全般で使われているワードです。覚えておくと良いことがあるよ🎵
最低限の記述。
CSSアニメーションを実装する際に、最低限必要な情報は次の通りです。
① アニメーション名
② 継続時間
③ キーフレーム（変化させるCSSプロパティの内容）
① アニメーション名
animation-name。
セレクタ外部に記述される「キーフレーム」を呼び出すためのプロパティです。
名前については、１部の例外を除けば自由につけることができます。仮に「animation-1」とした場合の記述例。
このように書きます。キーフレームとの関係はこのあとお話しします。
② 継続時間
animation-duration。
アニメーションが始まってから終了するまでの時間を指定します。単位はs（秒）またはms（1/1000秒）で指定することができます。
記述例：
③ 変化させる内容
@keyframes。
キーフレームはCSSアニメーションにおける、具体的なプロパティ値の変化を記述する場所です。
CSSアニメーションではアニメーション名やタイミングに関するもの（継続時間や繰り返しの度合いなど）は対象の要素セレクタ内に記述しますが、具体的なプロパティの変化内容については、要素セレクタの外部に@規則で記述することになっています。
記述例：
「@keyframes」の後には先ほど指定したアニメーション名を記述します。これにより、要素セレクタとキーフレームを紐付けます。
この中に具体的なキーフレームとタイミングを記述していきます。
キーフレームを指定したいタイミングは、全体の継続時間に対する進捗度（0〜100%）で表現します。
その中に状態を示す、CSSのプロパティと値を記述。
例をあげてみます。
始まりが背景色：白で、終了時が背景色：シアンにしたい。
この場合キーフレームは、最初と最後の２つ必要ですね？
このように記述します。
今度は「はじめはシアン、中間地点でいったん白になり、最終的にマゼンタになる」というもの。
キーフレームは３つ。
始まり（0％）と終わり（100%）以外は、好みのタイミングでキーフレームを打つことができます。
ロリポップ！の取次店になりました。
実装してみる。
では実際にコードを書いて実装してみましょう。
要素の背景色が白からシアンに、というのをやってみたいと思います。
〜とその前に。
・繰り返し回数
animation-iteration-count。
先ほど３つの情報「アニメーション名、継続時間、キーフレーム」。これだけあればCSSアニメーションは実装できる、とお話ししました。
が、この３つだけではアニメーションは１度きりしか再生されません。プレビューしやすいよう、繰り返し再生を指定しましょう。それにはanimation-iteration-countプロパティを用います。
値には「１」や「３」などの整数値が使えますが、「永遠に繰り返し」たい場合には「infinite」を指定します。今回はこれでいきましょう。
気を取り直して、コードを書いていきます。
■ HTML
CSSアニメイション。
</body>■ CSS
CSSアニメイション。
結果はこの⬆︎ように。
うまくいきましたか？
これで、アニメーターもしくはモーショングラフィッカー？の仲間入りですね！
お疲れ様でした。
最後までお読みくださり、ありがとうございました。
ひとまづはシンプルなアニメーションが実装できました。プロパティや継続時間を書き換えて、色々と実験してみてください。
今回は「理解」を優先させたかったので、あえてベタな記述法でコードを紹介しました。
本当は省略などを使った、実用的な記述がCSSアニメーションには用意されています。次回以降紹介していきますね、お楽しみに。
ではまた〜 🎵
SVGアニメーション、作り方。
HTMLで画像を重ねる、便利な方法。
2021.01.20
positionやz-index指定なし。
CSSアニメーション、発火のタイミングを制御する。
2020.05.31
〽️ 好きなタイミングで発火/消火。
「ふ」です。
swift、web、ベクター/モーショングラフィックなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。