Transition-property プロパティ

最終更新：2026-09-13

transition-property Transition-property プロパティ

transition-property プロパティは、値が変化したときにどの CSS プロパティにトランジション効果を適用するかを指定します。デフォルト値は all で、すべてのアニメーション可能なプロパティがトランジションに参加することを意味します。不要なパフォーマンスコストや予期しないアニメーション動作を避けるため、特定のプロパティ名を明示的に列挙することもできます。

カテゴリ
初期値	all
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

transition-property: none | all | <property>#;

⚙️ 値

値	タイプ	説明
`all \| none`	キーワード	すべてのプロパティかなし
`<property>`	タイプ	トランジションするプロパティ

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
transition-property	✓ v26	✓ v12	✓ v16	✓ v6.1	✓ v12.1
すべての主要ブラウザーでサポート

注意： all を使うのは便利ですが、アニメーション可能なプロパティへの変化は何でもトランジションを引き起こし、予期しない効果を生むことがあります — font-size の変化さえアニメーション化されます。実際に必要なプロパティを列挙することをお勧めします。

❓ よくある質問

Qtransition-property はどの CSS プロパティをアニメーション対象にできますか？

A補間可能なプロパティだけがトランジションできます — 中間的な数値状態を持つもの、例えば color、opacity、transform、box-shadow、filter、width、height です。display、visibility、font-family のような離散的なプロパティは滑らかにできず、状態間を単に飛びます。

Qtransition-property を none に設定する意味は何ですか？

Anone はどのプロパティもトランジションに参加しないことを意味し、要素のトランジションを無効にするのと等価です。一時的にトランジションをオフにするために一般的に使われます — 例えば、ページ初回読み込み時に要素が初期位置から「飛び込む」のを防ぎます。親やグローバルスタイルシートから継承したトランジション設定をリセットするためにも使えます。

Qtransition-property: all の落とし穴は何ですか？なぜ all は推奨されないのですか？

Aall はアニメーション可能なプロパティが変化するたびにすべてをアニメーション化し、2 つの問題を生みます。パフォーマンスコスト（font-size や line-height などの副次的なプロパティの変化もアニメーション化される）と、制御しにくい動作（管理されていないようなアニメーションになる）です。プロパティを明示的に列挙する方が安価で保守も容易です — all が向くのはアニメーション可能なプロパティがごく少ない小さなコンポーネントだけです。

Qなぜ height: auto の値はトランジションまたはアニメーションできないのですか？

Aheight: auto には確定した中間値がないため、ブラウザは height: 0 と auto の間を補間できず、アニメーションは突然飛びます。一般的な回避策は、max-height の手法、grid-template-rows を 0fr から 1fr へトランジションしてコンテンツを表示する方法、あるいは transform-origin と共に scaleY() を使って視覚的に展開する方法です。