CSS3 transition-delay 属性

实例

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

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

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

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 属性，你可以控制过渡效果的延迟时间，从而实现更精确的动画效果。

默认值：	0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionDelay="2s"

transition-delay: time;

值	描述
time	指定秒或毫秒数之前要等待切换效果开始