transition-property
transition-property
は CSS のプロパティで、トランジション効果を適用する CSS プロパティを指定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
注: アニメーション可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。
一括指定プロパティ (例えば 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, color;
transition-property: all, -moz-specific, sliding;
/* グローバル値 */
transition-property: inherit;
transition-property: initial;
transition-property: unset;
値
none
- どのプロパティもトランジションを行いません。
all
- トランジションが可能なすべてのプロパティで、トランジションを行います。
<custom-ident>
- 値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。
Formal definition
Formal syntax
none | <single-transition-property>#ここで
<single-transition-property> = all | <custom-ident>
例
中心となる CSS トランジションの記事に、 CSS トランジションの例がいくつかあります。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transitions transition-property の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser