CSSアニメーションとは何か
CSSアニメーションとは、要素のスタイルを時間の経過にあわせて少しずつ変化させ、見た目に「動き」を生み出すCSSの機能です。位置や色、透明度、サイズといった値を、ある状態から別の状態へなめらかに移り変わらせます。
似た仕組みにtransitionがありますが、transitionが「ある状態から別の状態への一度きりの変化」を扱うのに対し、アニメーションは複数の中間地点を指定でき、繰り返しや一時停止などの細かい制御がしやすいのが特徴です。
JavaScriptを書かずにブラウザ側でなめらかに描画してくれるため、軽い装飾的な動きであればCSSだけで十分まかなえます。
@keyframesで動きの設計図を作る
アニメーションの中身は@keyframesで定義します。@keyframesは「何パーセントの時点でどんなスタイルか」を並べた、動きの設計図のようなものです。
もっとも単純な形はfrom（開始＝0%）とto（終了＝100%）の2点だけを書く形です。さらに細かく動かしたいときは0%、50%、100%のようにパーセントで中間の状態を追加していきます。
@keyframesには名前を付けます。この名前を後でanimation側から呼び出すことで、どの要素にどの動きを適用するかを結び付けます。
実務ではどこで関係する？
CSSアニメーションは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
CSSアニメーションについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
animationプロパティで再生を指定する
@keyframesで作った設計図は、それ自体では何も起きません。動かしたい要素にanimationプロパティを書いて、初めて再生されます。
animationでは、使う@keyframesの名前、1回あたりの再生時間、変化のなめらかさ（イージング）、繰り返し回数、開始までの待ち時間などをまとめて指定できます。これらは個別のプロパティに分けて書くこともできます。
基本の書き方を順に組み立てる
実際にひとつ作る流れを、手順として並べてみます。最初はシンプルな動きから始めると挫折しにくくなります。
- 動かしたい要素にクラスを付ける（例：ふわっと表示したい見出し）
- @keyframesで動きを定義し、わかりやすい名前を付ける
- 0%と100%のスタイルを書く（透明から不透明へ、など）
- 対象のクラスにanimationを書き、@keyframesの名前と再生時間を指定する
- ブラウザで開いて、想定どおりに動くか目視で確認する
- 速すぎ・遅すぎなら再生時間やイージングを微調整する
よくあるつまずきと配慮
「動かない」原因で多いのは、@keyframesの名前とanimationで呼ぶ名前が一致していないケースです。スペルや大文字小文字を見直しましょう。再生時間を指定し忘れている場合も再生されません。
動きを付けすぎると、かえって読みにくく目が疲れるページになります。意味のある箇所に絞るのが基本です。また、激しい動きが苦手な利用者のために、端末側で動きを減らす設定を尊重するprefers-reduced-motionへの配慮も知っておくとよいでしょう。
作った動きを誰かに見てもらうとき
アニメーションは文章で説明しても伝わりにくく、実際に動いている画面を見てもらうのが一番です。完成前のHTMLを関係者に確認してもらいたい場面は少なくありません。
ギガサイト便は、HTMLファイルやCSS/JSを含むZIPをドロップするだけで一時的な共有URLを発行できるサービスです。同じURLのままファイルを差し替えられるので、動きを微調整しながら何度もレビューしてもらう用途に向いています。社外に見せたくない試作なら、パスワードやメール認証を併用すると安心です。
よくある質問
CSSアニメーションとtransitionの違いは何ですか？
transitionは「ある状態から別の状態への一度きりの変化」を扱うのに対し、CSSアニメーションは@keyframesで複数の中間状態を指定でき、繰り返しや一時停止などの制御がしやすい点が違います。常時動かしたい場合はアニメーションが向いています。
アニメーションが動かないときに最初に見る点は？
@keyframesに付けた名前と、animationで呼び出す名前が一致しているかをまず確認してください。次に再生時間が指定されているか、対象のセレクタが正しく要素に当たっているかを見ると、多くのケースで原因が見つかります。
JavaScriptを使わずにどこまで動かせますか？
位置移動・回転・拡大縮小・色や透明度の変化など、装飾的な動きの多くはCSSだけで実現できます。ユーザーの操作に応じて複雑に分岐する処理が必要になった段階で、JavaScriptの併用を検討するとよいでしょう。
動きが多すぎると問題になりますか？
過剰な動きは読みづらさや目の疲れにつながり、動きが苦手な利用者には負担になります。意味のある箇所に絞り、prefers-reduced-motionで動きを控えたい設定を尊重するのが望ましいです。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。