CSS3 transition-delay 属性

一、实例

等待2秒前切换效果开始：

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

二、属性定义及使用说明

transition-delay 是 CSS3 中用来指定过渡效果延迟开始的时间的属性。它定义了在元素状态发生改变后，过渡效果开始应用的延迟时间，从而允许你控制过渡效果何时开始执行。

该属性的值可以是秒（s）或毫秒（ms），表示过渡效果的延迟时间。

例如，如果你想在状态改变后等待 0.5 秒后才开始过渡效果，可以这样写：

.element {
  transition-delay: 0.5s;
}

如果你想让过渡效果立即开始，而不希望有延迟，可以将值设为 0：

.element {
  transition-delay: 0s;
}

你也可以为每个属性指定不同的延迟时间。例如，如果你想让宽度变化的过渡效果延迟 0.3 秒，而高度变化的过渡效果延迟 0.5 秒，可以这样写：

.element {
  transition-property: width, height;
  transition-delay: 0.3s, 0.5s;
}

这样，宽度变化的过渡效果会在状态改变后等待 0.3 秒开始，而高度变化的过渡效果会在状态改变后等待 0.5 秒开始。

通过调整 transition-delay 属性，你可以控制过渡效果的延迟时间，从而实现更精确的动画效果。

语法

transition-delay: time;