CSS Transitionビジュアライザー
スライダーを動かしてtransitionを調整。ホバー前後の動きを確認しながらCSSをコピーして使えます
transition-property
transition-timing-function
通常状態 🎨
CSS
.card {
background-color: #f0fdf4;
color: #1e293b;
border-radius: 8px;
transition: background-color 400ms ease 0ms;
}
.card:hover {
background-color: #0d9488;
}使い方
- transition-property でアニメーションしたいプロパティを選ぼう
- duration・timing-function・delay を調整して動きの違いを確認しよう
- 「📋 CSSをコピー」ボタンでコードをコピーして、自分のスタイルシートに貼り付けよう！
transition と animation の使い分け
「動き」をつけるCSSプロパティは2つある。transition と animation。どっちを使えばいい？
- transition — 状態Aから状態Bへの変化を滑らかにする。ホバー・フォーカス・クラス切替など「トリガーがある」動きに。
- animation — 自動で再生される。ローディング・注目アニメ・背景の動きなど「トリガーなし」で動かしたいときに。
迷ったら「ユーザーの操作で変わる → transition」「勝手に動く → animation」と覚えよう。
ホバーエフェクトの定番パターン
- ボタンの色変化 —
transition: background-color 0.2s easeでホバー時に色がふわっと変わる。 - カードの浮き上がり —
transition: transform 0.3s ease, box-shadow 0.3s easeで影が大きくなりながら少し上に移動。 - 下線の伸び —
::after疑似要素の width を 0 → 100% に transition させるとリンクの下線が伸びる演出に。
よくある質問
- Q. transition が効かないプロパティはある？
displayは transition できない（none → block は瞬時に切り替わる）。代わりにopacity+visibilityを使うのが定番。- Q. transition-property に all を指定していいの？
- 動くけど、意図しないプロパティまでアニメーションしてパフォーマンスが落ちることがある。変化させたいプロパティだけ明示する方が安全。