最終更新日 2021年6月21日

transition-propertyプロパティ

transition-propertyは、遷移させるプロパティを指定するプロパティです。

CSS3では、時間経過と共に要素のプロパティの値を徐々に変化させる、遷移のためのプロパティが定義されています。これを使うと、時間の経過によって要素の位置を変えたり、背景色を変えたりといった、アニメーション効果を表現できます。

transition-propertyでは、値に遷移対象のプロパティ名を指定します。カンマで区切って複数のプロパティ名を指定できます。

遷移関連プロパティの値をまとめて指定する場合は、transitionを使用します。

CSS3での変更点

・transition-propertyは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
all	すべての要素、::before擬似要素セレクタ、::after擬似要素セレクタ	なし

値	説明
all	遷移可能な全てのプロパティを遷移対象として指定します。（初期値）
none	遷移させるプロパティを指定しません。
プロパティ名	遷移させるプロパティ名を指定します。カンマで区切って複数のプロパティ名を指定できます。

サンプルコード

transition-property: all;
transition-property: none;
transition-property: color;
transition-property: background-color;
transition-property: color, background-color;
transition-property: color, background-color, margin;
transition-property: color, background-color, margin, width;

参考文献：CSS Transitions

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。