最終更新日

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外部リンク
HOME