CSS transition入門｜プロパティの書き方・ホバーアニメ・自然な動きの作り方

ボタンにマウスを乗せると色がふわっと変わったり、メニューがすっと開いたりするWebサイトを見たことはないでしょうか。こうした「状態が変わるときのなめらかな動き」を、たった数行で実現できるのがCSS transitionです。本記事では、transitionとは何かという基礎から、4つの構成要素、ホバーでの色・大きさの変化、animationとの違い、自然な動きを作るイージングのコツ、そしてパフォーマンスの注意点までを順を追って解説します。

CSS transitionとは何か

transition（トランジション）とは、CSSのプロパティの値が変化するとき、その変化を一瞬で切り替えるのではなく、指定した時間をかけてなめらかに補間する仕組みです。たとえば背景色を白から青に変えるとき、transitionがなければ瞬間的に切り替わりますが、transitionを指定すると白から青へじわっと移り変わります。

transitionが発動するのは、要素の状態が変わった瞬間です。代表的なきっかけは、マウスを乗せたときの:hover、クリックやフォーカス時の:focus、そしてJavaScriptでクラスを付け外ししたときなどです。「変化の前後の値」と「かける時間」さえ決めれば、間のコマはブラウザが自動で計算してくれるのがtransitionの本質です。アニメーションのために一枚一枚の状態を書く必要はありません。

動きの感触を手早く試すなら、ボタン生成ツールでホバー時の変化を切り替えながらプレビューしてみるのが分かりやすいでしょう。コードを書く前に、どんな動きが心地よいかを目で確かめられます。

transitionの4つの構成要素

transitionは、次の4つのプロパティで成り立っています。一括指定のtransitionを使えば、これらをまとめて書けます。

transition-propertyは、対象のプロパティを指定します。allを指定すると変化するすべてのプロパティが対象になりますが、後述のパフォーマンスの観点からは、変えたいプロパティを明示するのがおすすめです。

transition-durationは変化にかける時間で、秒（s）またはミリ秒（ms）で指定します。これを省略すると0sになり、transitionは事実上効きません。動きを付けたいなら必ず時間を指定すると覚えておきましょう。

一括指定なら、次のように1行でまとめられます。

transition: background-color 0.3s ease 0s;

これは「background-colorを、0.3秒かけて、easeの緩急で、待ち時間0秒で変化させる」という意味です。複数のプロパティを同時に動かしたいときは、カンマで区切ってtransition: color 0.2s, transform 0.3s;のように並べます。

ホバーで色や大きさを変える

transitionの最も身近な使いどころが、ホバー時の変化です。ポイントは、transitionは「通常の状態」の側に書くことです。こうすると、ホバーに入るときも出るときも、両方向でなめらかに変化します。

.btn {
  background-color: #3b82f6;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #2563eb;
}

この例では、ボタンの背景色がホバー時に少し濃い青へとなめらかに変わります。大きさを変えたいときは、transform: scale()を使うのが定番です。

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

大きさを変えるとき、widthやheightではなくtransform: scale()を使うのがコツです。理由はパフォーマンスの章で詳しく触れますが、transformはレイアウトの再計算を伴わず、なめらかに動かしやすいからです。色・大きさ・影を組み合わせると、立体感のある気持ちよいホバーになります。こうした組み合わせを試行錯誤するときは、ボタン生成ツールで各プロパティを変えながら結果を確認すると効率的です。

transitionとanimationの違い

CSSで動きを付ける方法には、transitionのほかにanimation（＋@keyframes）があります。両者は似ていますが、得意分野がはっきり分かれます。

transitionは、「ある状態から別の状態へ」という2点間の変化を、きっかけに応じてなめらかにつなぐのが得意です。ホバーやフォーカス、クラスの切り替えに反応するUIの動きは、ほとんどがtransitionで十分まかなえます。

一方animationは、@keyframesで途中の状態を何段階でも指定でき、ページ読み込み時に自動で再生したり、無限に繰り返したりできます。くるくる回るローディングスピナーや、自動で点滅・移動する装飾は、transitionでは作れないためanimationの出番です。「ユーザーの操作に反応する単純な変化」はtransition、「自動・反復・多段階の動き」はanimationと覚えると選びやすくなります。

自然な動きを作るイージングのコツ

動きの印象を大きく左右するのが、timing-function（イージング）です。これは「変化の速度配分」を決めるもので、同じ時間・同じ距離でも、緩急の付け方で印象がまったく変わります。

• linear：始めから終わりまで一定速度。機械的で硬い印象になりやすい。
• ease：ゆっくり始まり、速くなり、またゆっくり止まる。既定値で、多くの場面で自然。
• ease-out：速く始まってゆっくり止まる。UIの登場やホバーで気持ちよく感じやすい。
• ease-in：ゆっくり始まって速く終わる。退場や消える動きに向く。

現実の物体は、急に最高速で動き出して急停止することはありません。徐々に加速し、徐々に減速します。そのためlinearよりも、緩急のあるeaseやease-outのほうが「自然」だと感じられるのです。迷ったら、UIの登場やホバーにはease-outを試すと、すっと馴染むことが多いでしょう。

より細かく調整したいときは、cubic-bezier()で独自のイージング曲線を定義できます。4つの数値で曲線の形を決めますが、数値だけ見ても動きを想像するのは難しいものです。そこで、cubic-bezier生成ツールで曲線を視覚的にドラッグしながら動きを確かめ、生成された値をコピーするのが確実です。少し跳ねるような「弾む」動きも、曲線の形次第で表現できます。

もう一つのコツは時間配分です。UIの変化は、長すぎると待たされた印象になり、短すぎると気づかれません。ホバーなどの細かな変化は0.15〜0.3秒程度が心地よい目安です。実際の見え方はcubic-bezier生成ツールでduration（時間）とイージングを組み合わせて確かめるとつかみやすくなります。

パフォーマンスの注意点

transitionは手軽ですが、動かすプロパティを間違えるとカクつき（ジャンク）の原因になります。なめらかな動きを保つうえで重要なのが、「どのプロパティを動かすか」という選択です。

ブラウザは、プロパティの変化に応じて「レイアウト（位置・大きさの再計算）」「ペイント（描画）」「合成（レイヤーの合成）」という処理を行います。このうちレイアウトの再計算は最も重く、widthheighttopleftmarginなどを毎フレーム変化させると、処理が追いつかずカクつきやすくなります。

一方、transform（移動・拡大・回転）とopacity（透明度）は、レイアウトやペイントをやり直さずに合成だけで処理でき、GPUによる高速化も効きやすいため、なめらかに動かせます。そのため、次のような置き換えが有効です。

• 位置を動かす：top/leftではなくtransform: translate()
• 大きさを変える：width/heightではなくtransform: scale()
• 表示・非表示のフェード：opacityで変化させる

そのほか、transition: allは対象を絞れず予期しないプロパティまで動かしてしまうことがあるため、変えたいプロパティを明示するのが安全です。また、動きが苦手なユーザーへの配慮として、prefers-reduced-motionメディアクエリでアニメーションを控えめにする設定も検討するとよいでしょう。

CSS transitionは、状態変化を時間をかけて補間するだけのシンプルな仕組みでありながら、UIの印象を大きく高めてくれる基礎技術です。まずはボタン生成ツールでホバーの変化を、cubic-bezier生成ツールでイージング曲線を実際に触り、心地よい動きの感覚をつかんでみてください。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの対応状況は更新されることがあります。実装にあたっては最新の公式ドキュメントや対応状況を確認したうえで判断してください。