見出し画像

復習と整理と追加4・・

transition-duration プロパティ
変化が始まって終わるまでの時間を指定できるプロパティです。
transition-property プロパティ
変化を適用するプロパティを指定できるプロパティです。
transition-timing-function プロパティ
変化の度合いを指定できるプロパティです。
transition-delay プロパティ
変化が始まる時間を指定します。

transitionプロパティ・・
プロパティをまとめて指定できるショートハンドプロパティです。
transitionプロバティは変化前のスタイルに適用する。
書式
transition: ①対象プロパティ②時間③イージング④ディレイ
セレクタ名 {
transition:transition-propertyの値 transition-durationの値
transition-timing-functionの値 transition-delayの値 , transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}
e.g.)
p {
transition:background-color 1s linear 0s , width 2s linear 0s;
}

Tip・・

「>」
CSS中の「>」は子セレクタ(直下セレクタ)と呼ばれるもので、親セレクタ中の特定の要素に対してのみスタイルを適用。
div>p {
color:red;
}
「~」
指定した要素の後にある要素全てに適用。

この記事が気に入ったらサポートをしてみませんか?