今回はCSSアニメーションを始めたい方に簡単な概要を解説します。
順次別の記事で詳細をまとめますので、まずはざっくり要素を動かす流れを掴んで下さい。
HTML＆CSSの基本的な学習を終えている人を前提で解説しています。
HTML基礎
ぐらいの知識がある人にお伝えします。
とにかく動かしてみる。
アニメーションとは、色や位置、サイズなどの値を所定の時間をかけて徐々に変化させることができることを意味します。
以下のサンプルコードをHTMLファイルとCSSファイルにコピペして動く事を確認してください。
See the Pen Untitled by naoq (@naoq) on CodePen.
3秒回転したら機能しています。
主なコードの解説
- animation-nameで指定した名前「rotate」と
@keyframesアットルールで定義されたルールが紐づいてます。 animation-durationで動く時間を制御しています。- 0％｛｝内で動き始めの状態を指定
- 100%{}内で動き終わりの状態を指定
- transform:で動きの種類を指定しています。今回はrotate()で回転を指定
自分で書いてみよう
先ほどコピペでとにかく動かしてみる事に注力しましたが、自分で1文字ずつ書いてみてください。
スペルミスや文法ミスを経験できれば、今後のトラブルですぐ間違えやすい原因が掴める力がつきます。
ルールだけでなく、自分で感覚を身に着けておくと良いです。
CSSアニメーションのメリット
CSS アニメーションは、従来のJavaScriptによるアニメーションに比べて 3 つの長所があります。
- JavaScript を知らなくてもアニメーションを作れる。
- システム負荷を軽減しやすい。 JavaScript では、 上手に作成しなければシステムの負荷を高めてしまうことがあります。結果表示が重くなります。
- ブラウザーがアクティブではない要素のアニメーションの更新の頻度を減らしたりしてパフォーマンスや効率を最適化します。
CSSアニメーションの種類
CSSでアニメーションを実現するには、CSS アニメーションか CSS トランジションの２つの選択肢があります。
CSS アニメーション (CSS Animations) は時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。
キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。
CSS トランジション（CSS Transition）は、開始状態と最終状態の2つの状態間をCSSプロパティが変化させます。その際のアニメーションの速度を操作する手段を提供します。
プロパティの変更を一定期間にわたって発生させることを可能にします。
まとめ
今回はCSSアニメーションの大まかな流れを解説しました。
次の記事で順番に細かいルールを紹介していきます。
