transition-property

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

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

一括指定プロパティ (例えば 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 トランジションの利用
• TransitionEvent