CSSアニメーションの作り方を完全マスター！7つの方法で魅力的なサイトへ

はじめに

CSSアニメーションの作り方は、状態変化ならtransition、時間軸に沿った連続表現ならanimationと@keyframesを選ぶと整理しやすくなります。そのため、初心者は最初から複雑な演出を組むより、色、透明度、移動、拡大縮小を小さなサンプルコードで確認し、使い方を段階的に増やすほうが理解しやすいでしょう。

これから扱うCSSのアニメーションは、JavaScriptで座標を毎回計算する作り方とは違い、ブラウザのスタイル計算と描画処理に任せられる範囲が広い技術です。ただし、どのプロパティを動かすかで滑らかさが変わるため、transformとopacityを中心に考えるのが現実的だと言えます。

一般に、ボタンのホバー演出、カードのフェードイン、ローディング表示、背景のループ表現などはCSSだけで扱えます。一方、ユーザー操作に応じて複雑な分岐を行う場合は、CSSで見た目の動きを作り、JavaScriptで状態を切り替える構成が扱いやすいです。

公式ドキュメントによれば、CSSアニメーションはスタイル設定を別の設定へ遷移させる仕組みで、キーフレームによって途中状態も表現できるのが基本です。詳しい仕様の確認にはMDNのCSSアニメーションの使用とMDNのtransitionリファレンスが役立ちます。

CSSアニメーションの基本と魅力

CSSアニメーションは、HTML要素の見た目を時間に沿って変化させるCSSの表現方法です。その変化はbackground-color、color、opacity、transformなどのプロパティに現れ、ユーザーの操作やページ表示のタイミングに合わせて動きを作れます。

これを使う魅力は、画像や動画を追加しなくても、ボタン、カード、ナビゲーション、見出しに軽い視覚的な反応を与えられる点にあります。ただし、動きが多すぎる画面は読みにくくなるため、CSSのアニメーションは情報の優先順位を補助する目的で使うのが基本だ。

初心者がつまずきやすいのは、CSSアニメーションを「常に動く装飾」として考えてしまう場面です。そのため、作り方の軸は、ユーザーが触ったときに反応する:hover、画面に現れたときに見せる@keyframes、状態を表すclassの切り替えに分けると理解できるのが目安です。

CSSアニメーションの役割

具体的には、フォームの送信ボタンに短い変化を付けると、押せる要素であることが伝わりやすくなるのが基本です。このとき、transition-durationが長すぎると反応が遅く感じられるため、0.2sから0.4s程度を基準に調整する作り方がよく使われます。

その一方で、読み込み中のローダーや背景の波形のように、継続的な動きが必要な場面もあるのがポイントです。こうした演出ではanimation-iteration-countにinfiniteを使えますが、視線を奪い続けない速度と面積に抑える対処法も合わせて考える必要があります。

使う場面を絞る考え方

基本的に、CSSアニメーションは「操作の結果を示す」「注目箇所をやわらかく示す」「画面遷移の違和感を減らす」という用途に向きますし、ここがポイントです。逆に、文章を読む領域の近くで大きく動く要素を置くと、理解の妨げになるかもしれません。

そのため、CSSでInline-blockを効果的に使う方法9選のようなレイアウト知識と組み合わせ、要素の配置が崩れない範囲で動きを加える判断が必要です。CSSの使い方を単独で覚えるより、余白、表示形式、配置の関係まで見るほうが実装ミスを減らせますし、ここがポイントです。

CSSアニメーションの基本的な技術

CSSアニメーションの解説で中心になるのは、transitionとanimationです。前者はホバーやフォーカスなど状態が変わった瞬間の補間に向き、後者は@keyframesで時間軸を設計する作り方に向きます。

これらを混同すると、短いホバー演出に不要なキーフレームを書いたり、複雑なループ表現をtransitionだけで処理しようとしたりします。そのため、状態変化か連続再生かを先に決めると、CSSのコード量を抑えやすくなるでしょう。

transitionプロパティの基本

具体的には、transition-propertyで変化させる対象を決め、transition-durationで時間、transition-timing-functionで速度曲線、transition-delayで開始待ち時間を制御します。この構成を理解すると、CSSでホバー演出を作る使い方が読みやすくなります。

.button {
  background-color: blue;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.button:hover {
  background-color: red;
}

結果: 期待される表示は、.buttonにカーソルを重ねたとき、背景色が青から赤へ0.5sで変化する状態です。

このとき、ease-in-outは始まりと終わりをゆるやかにする値です。ただし、クリック直後の反応に使う場合は、遅く感じないようにtransition-durationを短めに調整するとよいでしょう。

animationプロパティの基本

一方、animationは名前付きのキーフレームを要素に結び付けます。CSSの@keyframes内ではfromとto、または0%から100%までの割合を使い、途中の見た目を定義できます。

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.text {
  animation-name: fadeInOut;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

結果: 期待される表示は、.textの透明度が0から1へ変化し、その動きが交互方向で繰り返される状態です。

その構成では、animation-delayによって開始が遅れ、animation-direction: alternateによって往復する動きになります。CSSの解説記事やリファレンスを読む際は、ショートハンドのanimationを個別プロパティへ分解して考えると理解しやすいです。

サンプルコードで学ぶCSSアニメーション

サンプルコードを読むときは、セレクタ、通常状態、変化後の状態、時間指定の順に追うと構造がつかめますが、これは押さえたい点です。そのため、CSSの初心者は完成形を丸ごと覚えるより、どの行が動きの原因かを分けて読むとよいでしょう。

これらの例は、ボタン、テキスト、オブジェクト、レスポンシブ対応という頻出の応用例につながります。作り方を変えれば、CSSグリッド入門！完全マスターの12ステップで扱うカード配置にも同じ考え方を応用できるのが現実的です。

サンプルコード1：ボタンの色変更アニメーション

このサンプルコードは、ボタンの通常状態とホバー状態だけで完結するCSSアニメーションです。具体的には、.buttonのbackground-colorを青にし、.button:hoverで赤へ変えることで、状態変化を視覚的に示します。

.button {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: red;
}

結果: 期待される表示は、ボタンにカーソルを重ねたときに背景色が青から赤へ滑らかに切り替わる状態です。

その書き方では、transitionの中に対象、時間、速度曲線をまとめているのが目安です。ただし、複数人で管理するCSSでは個別プロパティに分けるほうが、後から時間だけを変更しやすいかもしれません。

サンプルコード2：テキストのフェードイン・フェードアウト

この作り方では、opacityを0、1、0へ変化させ、文字が現れて消える流れを作りますが、これは押さえたい点です。一方、display: noneからdisplay: blockへの変化は滑らかに補間しにくいため、透明度を使うほうがCSSアニメーションに向きます。

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.text {
  animation: fadeInOut 3s infinite;
}

結果: 期待される表示は、.textが3秒周期で透明、不透明、透明へ移り変わり、その動きが繰り返される状態です。

これを通知文や補足ラベルに使う場合、常時点滅に近い動きは読みにくさにつながります。そのため、数回だけ再生したいならanimation-iteration-count: 3のように回数を限定する対処法が考えられますし、これが一つの目安です。

サンプルコード3：オブジェクトの移動と回転

移動と回転を組み合わせる場合は、transformの扱いに注意するのがポイントです。別々の@keyframesで同じtransformを変えると上書き関係が複雑になるため、初心者は単一のキーフレームにまとめる作り方も検討するとよいでしょう。

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.object {
  width: 50px;
  height: 50px;
  background-color: green;
  animation: moveRight 2s linear, rotate 2s linear infinite;
}

結果: 期待される表示は、.objectが右方向へ移動しながら回転する状態です。ただし、同じtransformを複数のアニメーションで扱うため、ブラウザ上では意図した合成にならない場合があります。

この対処法として、移動と回転を同じ@keyframesにまとめるか、親要素に移動、子要素に回転を割り当てる方法があります。CSSの応用例では、この分担を意識すると予期しない上書きを避けやすくなると整理できるのが一般的です。

サンプルコード4：レスポンシブ対応アニメーション

レスポンシブ対応では、画面幅やユーザー設定に応じて動きの量を調整します。公式ドキュメントのMDNの@mediaリファレンスにあるように、@mediaは条件に応じてCSSを適用する仕組みです。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.text {
  animation: fadeIn 3s ease-in-out;
}

@media (max-width: 600px) {
  .text {
    animation-duration: 1s;
  }
}

結果: 期待される表示は、通常幅では.textが3秒でフェードインし、幅600px以下では1秒でフェードインする状態です。

その調整は、小さい画面で長い演出が続く違和感を減らします。ただし、画面幅だけでなく、ユーザーが動きの軽減を求める設定もあるため、prefers-reduced-motionを使った対処法も覚えておくとよいです。

CSSアニメーションの応用例

CSSアニメーションの応用例は、単に派手な見た目を作るためのものではありません。これらは、情報の出現、操作の反応、状態の変化をわかりやすく伝えるための設計要素として使えます。

一方、応用例を増やすほどCSSの保守範囲も広がりますが、覚えておくと役立つでしょう。そのため、命名規則、共通の時間設定、色の変数化を整え、CSSを使った引用デザインの作成とカスタマイズ方法7選のような装飾パターンとも整合させると扱いやすくなるのが現実的です。

応用例1：複数アニメーションの組み合わせ

複数の動きを組み合わせる作り方では、キーフレーム内でtranslateX()とrotate()を同時に書くと見通しがよくなります。CSSのtransformは複数の変形関数を並べられるため、移動、回転、拡大を一つの流れとして扱えますし、ここを基本と考えるとよいでしょう。

@keyframes moveAndRotate {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(100px) rotate(360deg);
  }
}

.object {
  width: 50px;
  height: 50px;
  background-color: blue;
  animation: moveAndRotate 3s linear infinite;
}

結果: 期待される表示は、.objectが3秒周期で右へ移動しながら一回転し、その動きが繰り返される状態です。

このサンプルコードは、動きを単一の@keyframesにまとめているため、移動と回転の関係を読み取りやすいです。ただし、infiniteで常時動かす場合は、表示面積や速度を抑える対処法を合わせて設計します。

応用例2：インタラクティブなUIデザイン

ユーザー操作に反応するCSSアニメーションでは、ホバー、フォーカス、アクティブ状態をそろえて考えます。マウス操作だけに依存するとキーボード利用者に伝わりにくいため、:focus-visibleや:activeも含める使い方が望ましいでしょう。

.button {
  padding: 10px 20px;
  border: 2px solid black;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: black;
  color: white;
  transform: scale(1.1);
}

結果: 期待される表示は、ボタンにカーソルを重ねたとき、背景が黒、文字が白になり、少し拡大する状態です。

ただし、このコードではtransition: allが使われています。学習用のサンプルコードとしては短く読めますが、実装ではbackground-color、color、transformのように対象を限定する対処法が適しています。

応用例3：動的な背景アニメーション

背景を動かす応用例では、コンテンツより目立たない速度とコントラストに抑えることが大切です。CSSでbackground-position-xを変化させると、模様が横に流れる表現を作れますし、ここがポイントです。

@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1000px;
  }
}

.background {
  background-image: url('wave-pattern.png');
  animation: wave 10s linear infinite;
}

結果: 期待される表示は、wave-pattern.pngが横方向に流れ、背景に波のような動きが出る状態です。

その実装では、画像の端がつながっていないと繰り返し位置で切れ目が見えます。そのため、背景画像はタイル状に連続しても違和感の少ない素材を使い、必要に応じてbackground-repeatも確認します。

CSSアニメーションの注意点と対処法

CSSアニメーションで起こりやすい問題は、動かない、重く見える、点滅が強い、レイアウトがずれる、端末によって印象が変わるといったものです。これらはコードの誤りだけでなく、プロパティ選択や表示条件の設計から発生します。

そのため、対処法は「文法を直す」「動かす対象を変える」「動きを減らす」「条件を分ける」に分類できます。初心者はCSSのプロパティ名だけを追いがちですが、ブラウザの開発者ツールで適用済みスタイルと上書き関係を見ると原因を絞りやすいでしょう。

一般的な問題と解決策

動かない場合は、animation-nameと@keyframes名の不一致、animation-durationの未設定、セレクタの優先順位、疑似クラスの状態不足を確認すると覚えるとよいでしょう。このとき、0sのままでは変化が見えないため、時間指定も見直すると理解できます。

一方、重く見える場合は、width、height、top、leftなどレイアウト再計算につながりやすいプロパティを動かしていないか確認します。CSSで移動や拡大を扱うなら、transformを使う作り方が一般的です。

こうした対処法は、単純なボタンにも大きな背景にも共通すると考えられます。特に押さえたいのは、見た目の変化をCSSで作る前に、ユーザーが読む文章や操作するフォームを邪魔しないかを確認することです。

パフォーマンスの最適化

パフォーマンス面では、transformとopacityを優先し、影、ぼかし、大きな背景画像の連続変化は控えめにすると覚えるとよいでしょう。ただし、will-changeを常に付ける作り方はメモリ消費につながる場合があるため、必要な場面に限定するのが現実的です。

この考え方は、CSSのアニメーションだけでなく、通常のレイアウト調整にも関係します。文字の折り返しやカード幅が原因で動きと表示がぶつかる場合は、CSSのword-breakを完全解説！初心者からプロまでの5つのコード例のようなテキスト制御も合わせて見直すとよいです。

CSSアニメーションのカスタマイズ方法

CSSアニメーションのカスタマイズでは、色や大きさを変えるだけでなく、どの操作に反応し、どの程度の時間で戻るかを決めますし、これが一つの目安です。その判断が曖昧なままサンプルコードを増やすと、ページ全体の動きに統一感がなくなるのが基本です。

そのため、共通の時間として--motion-fast、--motion-normal、--motion-slowのようなCSSカスタムプロパティを用意する方法もあります。初心者向けの使い方としては、最初にホバー時間だけを変数化し、慣れてから色や影へ広げるのが扱いやすいでしょう。

アニメーションのカスタム化

ボタンのカスタム化では、背景色、拡大率、枠線、影の変化を組み合わせます。具体的には、.custom-buttonに通常状態を置き、.custom-button:hoverでtransform: scale()と背景色を変える作り方が読みやすいです。

.custom-button {
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: none;
  transition: all 0.3s ease;
}

.custom-button:hover {
  transform: scale(1.2);
  background-color: #4CAF50;
}

結果: 期待される表示は、.custom-buttonにカーソルを重ねると、少し大きくなり背景色が緑系に変わる状態です。

ただし、scale(1.2)は周囲の要素に重なりやすい倍率です。そのため、実際の画面設計ではscale(1.03)からscale(1.08)程度に抑え、余白と重なりを確認する対処法が合います。

異なるデバイスでの対応

デバイス差に対応するCSSの使い方では、画面幅、入力方法、動きの軽減設定を分けて考えます。スマートフォンではホバーが期待どおりに働かない場合があるため、タップ後の.is-active状態やフォーカス状態も設計に含めるとよいでしょう。

.responsive-animation {
  transition: transform 0.5s ease;
}

@media (max-width: 600px) {
  .responsive-animation {
    transition: transform 0.3s ease;
  }
}

@media (min-width: 601px) {
  .responsive-animation {
    transition: transform 0.7s ease;
  }
}

結果: 期待される表示は、.responsive-animationのtransform変化が、幅600px以下では0.3秒、幅601px以上では0.7秒で補間される状態です。

このサンプルコードは、同じ要素でも表示条件ごとに速度を切り替える応用例です。一方、端末幅だけで体験を決めると例外が残るため、入力方法を判定する(hover: hover)や(pointer: coarse)も必要に応じて検討できます。

まとめ

CSSアニメーションの作り方は、状態変化を扱うtransitionと、時間軸を扱うanimationに分けると整理できます。そのうえで、@keyframes、transform、opacity、@mediaを組み合わせると、初心者でも読みやすいサンプルコードから応用例へ進めますが、これは押さえたい点です。

これらの使い方で大切なのは、動きそのものを増やすことではなく、操作や情報の意味を補うことです。ただし、重さ、ちらつき、読みづらさが出る場合は、動かすプロパティを見直し、時間を短くし、prefers-reduced-motionに対応する対処法を加える必要があると考えられます。

具体的には、ボタンの色変更、フェードイン、移動と回転、レスポンシブ対応、背景のループ表現を小さく作り、必要な場面だけに適用すると管理しやすくなります。CSSの解説を読むときも、サンプルコードの中で何が通常状態で何が変化後の状態かを追うと、作り方の判断が安定するでしょう。

関連記事

• CSSグリッド入門！完全マスターの12ステップ
• CSSでInline-blockを効果的に使う方法9選
• CSSにおけるquerySelector()の活用法10選！初心者からプロまで役立つCSSガイド
• CSSを使った引用デザインの作成とカスタマイズ方法7選
• CSSのword-breakを完全解説！初心者からプロまでの5つのコード例

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。