transition ショートハンドプロパティ
最終更新：2026-09-13
transition transition ショートハンドプロパティ
transition は、要素のプロパティ値が滑らかに変化するよう指定する CSS のショートハンドです。:hover や :focus などの状態変化時に、スタイルをアニメーションで表現し、瞬間的な切り替えを防ぎます。対象プロパティ・継続時間・速度曲線・遅延を指定するだけで、滑らかなインタラクション効果を簡単に作れます。モダンな Web のマイクロインタラクションを作る基本ツールです。
| カテゴリ | |
|---|---|
| 初期値 | all 0s ease 0s |
| 継承 | いいえ |
| 適用対象 | すべての要素 |
| アニメーションタイプ | shadow |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
transition: [ none | <single-transition> ]#;
/* <single-transition> = [ <property> | none ] || <time> || <easing-function> || <time> */⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<single-transition># | 値 | トランジション短縮記法：プロパティ・時間・タイミング関数・遅延 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： 速度曲線を省略すると既定の ease になり、遅延を省略すると既定の 0s になります。複数のトランジションはカンマで区切るので、プロパティごとに別々の設定ができます。
注意： すべてのプロパティがトランジション可能なわけではありません。中間値を持つプロパティ（color、opacity、transform など）だけがアニメーションでき、display のような離散プロパティは遷移できません。
❓ よくある質問
Qtransition と animation の CSS プロパティの違いは何ですか？
Atransition は :hover や :focus のようなトリガーが必要で、開始値と終了値の 2 つの状態の間を動きます。animation は @keyframes と組み合わせて任意の数のキーフレームを定義でき、自動再生・ループ・逆再生・一時停止が可能で、はるかに強力です。一言で言えば、状態変化には transition、複雑な連続モーションには animation を使います。
Q一部の CSS プロパティだけにトランジションを適用するには？
Atransition-property でアニメーションしたいプロパティ名を明示的に列挙します（例: transition-property: background, transform;）。指定しない場合の既定値は all で、アニメーション可能なすべてのプロパティが対象になり、意図しないアニメーションや不要なパフォーマンスコストを招くことがあります。可能な限り明示的に宣言することをおすすめします。
QCSS の transition が効かないのはなぜですか？どう直せばいいですか？
Aよくある原因は 4 つあります。1) 対象プロパティ自体がアニメーション不可（display や font-family など）。2) 開始値または終了値が欠けていて、ブラウザが補間するものがない。3) transition を状態が変わる擬似クラスの中ではなく要素自体に書いていない。4) ショートハンドの順序が間違っている — duration は delay より前に書く必要があります。
Qtransition がカクカクするのはなぜですか？トランジションに不向きなプロパティは？
Awidth、height、top、left、margin、font-size のように再描画やリフローを引き起こすプロパティはトランジションしないでください。代わりに transform と opacity を優先してください。これらはコンポジタースレッドで処理され GPU が担当するため、60fps でも滑らかです。必要に応じて will-change を追加して合成レイヤーを事前に作ります。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
