CSS ・ アニメーション
transition
変化をなめらかにする
ホバーなどでプロパティの値が変わるとき、その変化を指定した時間をかけてなめらかに見せます。
01
サンプルコード
HTML
1<button class="btn">マウスを乗せてください</button>
CSS
1.btn {
2 padding: 12px 24px;
3 color: #7d5411;
4 background: transparent;
5 border: 1px solid #b68235;
6 border-radius: 4px;
7 transition: background-color 0.3s ease;
8}
9.btn:hover {
10 background-color: #ffe3bf;
11}
02
実行結果
ブラウザでの表示ボタンにマウスを乗せると背景色が変化します
03
解説
transition は「移り変わり」「変化」「変わり目」という意味で、ホバー時やクリック時の動きを調整できるプロパティです。animation プロパティほど細かい設定はできませんが、簡単に扱えるため、ホバー時の動きなどにおすすめです。
transition は「どのプロパティを」「何秒かけて」「どんな速度変化で」変えるかを1行で指定する一括指定プロパティです。
変化前の状態（.btn）に書くのがポイントです。こうすると、マウスを乗せたときも離したときも、なめらかに変化します。
ease は始めと終わりがゆっくりになる動き、linear は一定速度の動きです。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
transition-property | 変化させるプロパティ名（all ですべて） |
transition-duration | 変化にかける時間（0.3s など） |
transition-timing-function | ease / linear / ease-in-out など速度の変化 |
transition-delay | 変化が始まるまでの待ち時間 |
動きを減らす設定に配慮する
OSで「視差効果を減らす」を設定している利用者には、アニメーションを止めます。
CSS
1@media (prefers-reduced-motion: reduce) {
2 * {
3 transition: none;
4 }
5}
注意点
- 01all を指定すると、意図しないプロパティまで動くことがあります。
- 02width や top の変化は描画の負荷が高いため、transform や opacity を使うと軽く動きます。
05
ショートハンドの書き方と、うまく動かないとき
ショートハンドと省略なしは同じ意味
例：ショートハンドで書く
マウスを乗せると、0.3秒待ってから0.5秒かけて背景色が変わります。
HTML
1<div class="box">マウスを乗せてください</div>
CSS
1.box {
2 width: 220px;
3 padding: 24px 0;
4 text-align: center;
5 background-color: #e1ad66;
6 transition: background-color .5s ease-in-out .3s;
7}
8.box:hover {
9 background-color: #00f; /* 背景色をアニメーションで変化させる */
10 color: #fff;
11}
ブラウザでの表示
コードと表示の対応
background-colortransition-property：背景色を変化させる.5stransition-duration：0.5秒かけて（1つ目の秒数）ease-in-outtransition-timing-function：初速と終速を遅めに.3stransition-delay：0.3秒後に（2つ目の秒数）
上のショートハンドは、次のように4つのプロパティに分けて書いたものと どちらも同じ です。
| 省略なしの書き方 | 意味 |
|---|---|
transition-property: background-color; | 背景色を変化させる |
transition-duration: .5s; | 0.5秒かけて |
transition-timing-function: ease-in-out; | 初速と終速を遅めに |
transition-delay: .3s; | 0.3秒後に |
案件ベースでもショートハンドで書くことが多く、transform や opacity とセットで使うことが多いです。
transition がうまく動作しないときは
確認すること
- 書く対象が間違えていないか確認する。transition は「ホバー前」のセレクタ（
.box）に書きます。.box:hoverだけに書くのはよく見かけるミスで、戻るときに動きが付きません。 - display に transition を設定しようとしていないか確認する。
display: noneからblockへは、なめらかに変化させられません。visibilityも同様で、切り替わりはしますがフェードのようにはなりません。表示・非表示をなめらかにしたいときはopacityと組み合わせるか、animationプロパティを使うようにします。