transition-property

CSStransition-property プロパティは、トランジション効果を適用する CSS プロパティを指定します。

メモ: アニメーション可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。

一括指定プロパティ (例えば background) を指定すると、その個別指定のサブプロパティすべてをアニメーションさせることができます。

構文

/* キーワード値 */
transition-property: none;
transition-property: all;

/* <custom-ident> 値 */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* 複数の値 */
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* グローバル値 */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

none
どのプロパティもトランジションを行いません。
all
トランジションが可能なすべてのプロパティで、トランジションを行います。
<custom-ident>
値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。

形式文法

none | <single-transition-property>#

where
<single-transition-property> = all | <custom-ident>

中心となる CSS トランジションの記事に、 CSS トランジションの例がいくつかあります。

仕様書

仕様書 状態 備考
CSS Transitions
transition-property の定義
草案 初回定義
初期値すべて
適用対象すべての要素、::before / ::after 疑似要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
transition-propertyChrome 完全対応 26
完全対応 26
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 16
完全対応 16
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
完全対応 10
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 11.6 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 3.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 ≤37
完全対応 ≤37
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 16
完全対応 16
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 9
完全対応 9
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 1.5
完全対応 1.5
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
IDENT value
実験的
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 16IE 完全対応 10Opera 完全対応 ありSafari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 16Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報