CSS3 transition-propertyプロパティ

ブラウザ対応

表の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示しています。

-webkit-、-ms- または -moz- の直前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョン番号です。

プロパティの定義と使用説明

transition-property は、CSS3 でトランジション効果をどの CSS プロパティに適用するかを指定するプロパティです。トランジションさせたいプロパティを明示的に指定することで、要素の状態が変化したときに、すべてのプロパティではなく、指定したプロパティにのみトランジション効果を適用できます。

このプロパティの値には、CSS プロパティ名を指定することもできますし、すべてのプロパティにトランジション効果を適用することを意味するキーワード all を指定することもできます。

たとえば、色が変わるときにのみトランジション効果を適用したい場合は、次のように書くことができます：

.element {
  transition-property: color;
}

これにより、.element 要素の色が変化したときにトランジション効果が発生します。

すべてのプロパティにトランジション効果を適用したい場合は、all キーワードを使用することができます：

.element {
  transition-property: all;
}

これにより、どのプロパティが変化してもトランジション効果が発生します。

複数のプロパティをカンマ区切りで同時に指定することもできます：

.element {
  transition-property: width, height, opacity;
}

これにより、.element 要素の幅、高さ、または不透明度が変化したときに、トランジション効果が発生します。

構文

その他の例

マウスを div 要素にホバーすると、幅と高さが滑らかなトランジション効果で変更されます。