【font-family / font-size】フォントの設定
みいと
おじさんのWEBデザイン学習まとめ
transition-delayプロパティを使用すると、トランジションの開始時間を設定することができます。
transition-delayプロパティの値には、下記の単位の時間を指定できます。
初期値は0sになっているので、すぐに始まります。
s | 秒 |
---|---|
ms | ミリ秒(1/1000秒) |
実際にtransition-delayプロパティを使用すると、どのようになるのか見てみます。
まずは、transiton-delayの設定なし。
#sample1 {
width: 150px;
height: 150px;
background-color: gray;
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: ease;
}
#sample1:hover {
background-color: blue;
}
下記の四角にマウスカーソルを乗せると、すぐにトランジションが開始します。
次はtransition-delay: 1s;を指定した例です。
#sample2 {
width: 150px;
height: 150px;
background-color: gray;
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: ease;
trasition-delay: 1s;
}
#sample2:hover {
background-color: blue;
}
下記の四角にはtransition-delayプロパティで1sが指定されているので、マウスカーソルを乗せると1秒後にトランジションが開始します。
今回はトランジションの開始時間の設定をまとめました。
transition-delayプロパティを使えば、トランジションの開始時間を設定できるので、ちょっとした調整に使えそうな気がします。