トランジッション効果を開始するまでの遅延時間を設定する

CSS - transition-delay

概要

CSSプロパティ｢transition-delay｣は、トランジションを開始するまでの時間を指定することができます。指定した時間をすぎると、トランジションが開始されます。

しかしこのプロパティだけでは変化を与えることができません。このプロパティの他に、変化させたいCSSプロパティを指定する transition-property、始まってから終わるまでの時間を指定する transition-duration、変化の度合いを指定する transition-timing-function を指定するか、それらをまとめて指定できるショートハンドプロパティ transition を使用します。

<p>カーソルをグレイの部分にあててみてください</p>
<div class="transition"></div>
<style>
div {
  width: 10%;
  height: 50px;
  background-color: #ddd;
}
div:hover {
  background-color: #def;
  width: 100%;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
div.transition:hover {
  transition-delay: 1s;
}
</style>

取りうる値

値は、単位はs（秒）、ms（ミリ秒）で指定することができ、カンマで区切って複数指定することもできます。

{ transition-delay:  値}
値説明
時間初期値は0です。 単位はs（秒）、ms（ミリ秒）で指定できます。

transition関連のプロパティの一覧

指定された値がそれぞれどういった振る舞いをするかは transition プロパティページで解説していますので、参照してみてください。

プロパティ名説明
transition以下のプロパティをまとめて指定できるショートハンドプロパティ
transition-delay変化が始まる時間を指定する
transition-duration始まってから終わるまでの時間を指定する
transition-property変化させたいCSSプロパティを指定する
transition-timing-function変化の度合いを指定する

 

使用例

よくみられる使用例で、マウスホバー時のアニメーションあります。ホバーしているボタンの背景色が変わることはよくありますが、そこにこのプロパティを使うと、その背景色の変化が滑らかになります。ユーザー体感を向上させる１つの工夫といえるでしょう。

｢transition-delay: 1s｣値を変更してみてどのような変化があるか確認してみてください。

<p>上記の内容を送信しますか？</p>
<button>はい</button>
<button>いいえ</button>
<style>
button {
  padding: 10px;
  width: 100px;
  border-radius: 4px;
  background-color: #fff;
}
button:hover {
  background-color: #ddd;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
</style>

仕様書

 

関連CSSプロパティ