transition-propertyプロパティは、トランジションを適用するプロパティを指定するプロパティです。
{transition-property: プロパティ名;}
例えば、マウスオーバーで背景色を変えたり幅と高さを変えたりというようなことです。
transition-propertyの値の指定方法
transition-propertyプロパティでは、効果を適用するプロパティ名を指定し、複数指定する場合はカンマ（,）で区切って記述します。
{transition-property: プロパティ名,プロパティ名,プロパティ名;}
プロパティ名ではなく、noneかallを指定することもできます。
none
noneを指定すると、どのプロパティにもトランジション効果を適用しません。
all
allを指定すると、トランジション効果を適用可能なすべてのプロパティに効果を適用します。
以下、使用例です。幅200px・高さ120pxのボックスの背景色に紫、文字色に白を指定しており、マウスオーバーすると、背景色がオレンジ、文字色が黒に変わるように指定しています。
transition-propertyプロパティでは、allを指定しています。
.transition-ex {
width: 200px;
height: 120px;
background: purple;
color: white;
}
.transition-ex:hover {
transition-property: all;
background: orange;
color: black;
}
width: 200px;
height: 120px;
background: purple;
color: white;
}
.transition-ex:hover {
transition-property: all;
background: orange;
color: black;
}
マウスオーバーで背景色と文字色が変わります。
Leave a Comment