CSS3 transition-delay 属性

CSS3 transition-delay

transition-delay属性是CSS3中用来确定过渡效果延迟时间的属性。该属性规定了一个元素何时开始过渡，并可以控制延迟开始的时间。这个属性通常是结合CSS3的 transition属性来使用的。

语法结构

/* 起始时间格式 */
transition-delay: time;

/* 在多个过渡效果上设置起始时间 */
transition-delay: time time time time;

/* 全局全局值 */
transition-delay: initial|inherit;

值说明

值	描述
time	规定一个时间长度，单位可以是秒（s）或毫秒（ms）
initial	重置为默认初始值
inherit	将属性的值设置为其父元素的值

使用说明

通常情况下， transition-delay 属性与 transition-duration、transition-property 和 transition-timing-function一起使用，这些属性共同控制了过渡效果的表现形式。

在以下示例中，我们通过 transition-delay 属性结合两个属性: transition-duration 和 transition-property来实现一个过渡效果。当鼠标悬停在 HTML 元素上时，会触发过渡效果，从而改变大写字母的颜色。过渡效果从原始颜色 #000 过渡到最终颜色 #ff0000。整个过渡动画的时间为1秒钟，且等待时间为0.2秒钟。

div {
   transition-delay: 0.2s;
   transition-duration: 1s;
   transition-property: color;
}
div:hover {
   color: #ff0000;
}

兼容性

属性	Chrome	Firefox	Safari	Opera	IE
transition-delay	26.0+	15.0+	6.0+	12.1+	10.0+

总结

虽然比较常用的是结合其他属性来实现过渡动画，但 transition-delay 作为一个单独的属性，依然有其重要的作用，能够使得过渡动画更为精准、美观。从以上示例可以看出，合理地设置 transition-delay 属性值，能够大幅提升动画的效果，展现更为丰富的交互作用。

CSS3 transition 属性 CSS3 transition-duration 属性