CSS

【transition-delay】トランジションの開始時間

みいと

transition-delayプロパティでトランジションの開始時間を設定する

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;
}

下記の四角にマウスカーソルを乗せると、すぐにトランジションが開始します。

sample

次は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秒後にトランジションが開始します。

sample

トランジションの開始時間設定のまとめ

今回はトランジションの開始時間の設定をまとめました。

transition-delayプロパティを使えば、トランジションの開始時間を設定できるので、ちょっとした調整に使えそうな気がします。

まとめ

  • transition-delayを使用すると、トランジションの開始を遅らせることができる
  • 初期値は0sなので、すぐにトランジションが始まる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました