现在位置: 首页 > CSS 参考手册 > 正文

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 指定秒或毫秒数之前要等待切换效果开始