CSSアニメーション
CSS Animation
概要（サマリー）
CSSアニメーションとは、CSSだけで要素の見た目を時間とともに変化させる仕組みのことである。ボタンにマウスを乗せると色がふわりと変わる、通知がすっと滑り込んでくる、読み込み中のマークがくるくる回る。こうした動きの多くはJavaScriptではなくCSSで作られている。
パラパラ漫画にたとえると分かりやすい。「最初の絵」と「最後の絵」を指定すれば、その間の絵はブラウザが自動的に描いてくれる。何コマ描くかを人が考えなくてよいのが、CSSでアニメーションを書く利点である。
以下は、ホバーで変化する例と、自動で繰り返し動く例を並べたデモである。
transition（乗せると変化）
animation（自動で繰り返し）
詳細解説
transition と animation の違い
CSSで動きを付ける方法は、大きく2つある。この違いを押さえることが最初の関門である。
- transition: 状態が変わったときに、その変化を滑らかにつなぐ。きっかけが必要（ホバー、クラスの付け外しなど）。行き先は1つ
- animation: きっかけがなくても自動で動く。途中の状態を何段階でも指定でき、繰り返しもできる
「AからBへ1回だけ変わる」なら transition、「決まった動きを繰り返す」「途中の動きを細かく作り込む」なら animation を選ぶ。ボタンの色変化は transition、読み込み中のスピナーは animation、という具合である。
transition の書き方
変化させたいプロパティと、かける時間を指定するだけでよい。
.button {
background: #2563eb;
transform: scale(1);
/* 「何を」「どれくらいの時間で」「どんな緩急で」変化させるか */
transition: background 0.3s ease, transform 0.3s ease;
}
.button:hover {
background: #7c3aed;
transform: scale(1.05);
}
書く場所が重要である。transition は変化前の状態（通常時）に書く。:hover 側だけに書くと、マウスを乗せたときは滑らかでも、離したときに一瞬で戻ってしまう。ホバー演出でよくあるつまずきである。
animation と @keyframes の書き方
animation では、動きの内容を @keyframes として別に定義し、それを要素に割り当てる。
/* 動きの台本を書く。0% が開始、100% が終了 */
@keyframes fade-up {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.card {
/* 台本名・時間・緩急・終了後の状態 */
animation: fade-up 0.6s ease-out forwards;
}
最後の forwards は「終わったあと最後のコマの状態を保つ」という指定である。これを書かないと、アニメーションが終わった瞬間に元の位置へ戻ってしまう。「一瞬現れて消える」という相談の多くは、この指定が抜けていることが原因である。
繰り返したい場合は infinite、回数を決めたい場合は 3 のように数値を足す。
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
緩急（イージング）で印象が変わる
同じ時間・同じ距離でも、速度の変化のさせ方で印象が大きく変わる。
linear: 一定速度。回転など、機械的な動きに向くease-out: 速く始まってゆっくり止まる。要素の出現に向く。最も使いやすいease-in: ゆっくり始まって速く終わる。要素を消すときに向くcubic-bezier(...): 独自の曲線。跳ね返るような動きも作れる
現実のものは急に止まらないので、ease-out 系のほうが自然に見えることが多い。既定値は ease だが、意図して選ぶと仕上がりが変わる。
動かすプロパティで速さが変わる
見落とされやすいが重要な点である。同じ「移動」でも、書き方によってブラウザの負荷がまったく違う。
/* 重い: 位置が変わるたびにレイアウト全体を計算し直す */
.slow { transition: left 0.3s; }
/* 軽い: 描画結果をずらすだけで済む */
.fast { transition: transform 0.3s; }
left / top / width / height / margin といったプロパティは、動かすたびにページ全体のレンダリング計算が発生する。一方 transform（移動・拡大・回転）と opacity（透明度）は、その計算を飛ばして描画できる。
動かすなら transform と opacity を第一候補にする。 位置を動かすときは left ではなく transform: translateX()、大きさを変えるときは width ではなく transform: scale() を使う、と覚えておくとよい。スマートフォンでカクつくアニメーションは、たいていここが原因である。
動きを減らしたい人への配慮
画面の動きは、人によっては気分が悪くなる原因になる。OSには「視差効果を減らす」設定があり、CSSからもその意思を読み取れる。
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
動きを消しても内容は読めるべきである。「アニメーションが終わらないと本文が表示されない」作りは避けたい。アクセシビリティの観点では、動きは装飾であって前提条件にしないことが原則になる。
NOVEBLOには、アニメーションのCSSをその場で作れるツールと、具体的な実装例をまとめたページがある。
AIコーディングとの関係
CSSアニメーションはAIが得意な領域で、@keyframes の記述はほぼ正確に返ってくる。むしろ課題は「動きすぎる」ことにある。指示しないと、要素すべてに派手な演出が付いたコードが返ってくることがある。
- どの要素を、いつ、どう動かすかを具体的に指定する
transformとopacityで組んでほしいと明示する- 時間の目安を伝える（0.2〜0.4秒程度が扱いやすい）
prefers-reduced-motionへの対応を依頼する
たとえば「カードが下から20px上がりながらフェードインするアニメーションを作って。0.4秒・ease-out で、終了後の状態を保って。transform と opacity だけを使い、prefers-reduced-motion のときは動きを無効にして」と伝えると、そのまま使える形に近くなる。
生成後に確認したいのは3点。transition が通常時に書かれているか、forwards の有無、left や width を動かしていないかである。特に3つ目は、見た目では気づきにくいのに体感速度へ効く。
よくある勘違い
transition と animation は同じもの？
transition は「変化のきっかけがあったときに、その間をつなぐ」もので、animation は「きっかけなしに、台本どおり動かす」ものである。ホバーで色を変えるだけなら transition で足り、@keyframes を書く必要はない。
アニメーションにはJavaScriptが必要？
多くの演出はCSSだけで完結する。JavaScriptが要るのは、「スクロールで画面に入ったら動かす」のようにきっかけを検出する部分である。その場合もクラスを付け外しするだけで、動きそのものはCSSに任せるのがよい。
動かすプロパティは何でも同じ？
left を動かすのと transform: translateX() を使うのとでは、見た目が同じでも負荷がまったく違う。特にスマートフォンでは、この選択がなめらかさを左右する。
動きは多いほどリッチに見える？
動きが多すぎる画面は、目が休まらず内容が頭に入らない。読み込み完了の合図や、状態が変わったことを伝える場面など、意味のある動きに絞るほうが結果として上質に見える。
まとめ
- CSSアニメーションは、CSSだけで要素の見た目を時間とともに変化させる仕組みである
- 状態変化をつなぐなら transition、自動で動かすなら animation と
@keyframesを使う transitionは通常時に書く。:hover側だけに書くと戻りが滑らかにならない- 動かすプロパティは
transformとopacityを優先すると軽く仕上がる prefers-reduced-motionに対応し、動きがなくても内容が伝わる作りにする
情報ソース
より詳しくAIに聞いてみよう
- CSSの transition と animation の違いを、それぞれが向いている場面つきで整理してください。
- transform と opacity 以外のプロパティを動かすと重くなる理由を、ブラウザの描画の流れから説明してください。
- イージング（ease-out や cubic-bezier）の選び方を、UIの場面別に教えてください。
- prefers-reduced-motion に対応するとき、どこまで動きを止めるべきか判断基準を教えてください。
- AIにCSSアニメーションを生成してもらうとき、動きすぎない上品な演出にするにはどう指示すればよいですか。