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 疑似要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

26

あり -webkit-

12

12 -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

10

12.1

15 -webkit-

11.6 — 15 -o-

あり

あり -webkit-

IDENT value あり ? あり あり あり なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

あり

あり -webkit-

26

あり -webkit-

12

12 -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

?

あり

あり -webkit-

あり

あり -webkit-

IDENT value あり あり ? あり あり なし あり

1. 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.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, ethertank, yyss
最終更新者: mfuji09,