CSS transition-delay 属性

此 CSS 属性指定开始过渡效果的持续时间。此属性的值定义为秒 (s) 或毫秒 (ms)。CSS 过渡是添加到元素中的效果，用于将元素从一种样式逐渐更改为另一种样式，而无需使用 Flash 或 JavaScript。

如果不使用 transition-delay，动画将在鼠标悬停在元素上时开始，但使用此 CSS 属性，我们可以延迟动画一段时间。

语法

transition-delay 属性的默认值为 0，这意味着过渡将立即开始，没有任何延迟。

属性值

time: 指定在过渡开始之前等待的时间量（以秒或毫秒为单位）。

initial： 它将此属性设置为其默认值。

inherit： 它从其父元素继承此属性。

延迟可以是负数、正数或零。

transition-delay 属性的负值将立即开始过渡效果，即效果将像已经开始一样进行动画处理。此属性的正值会导致过渡效果在指定的时间内开始。

我们可以指定多个延迟，这在过渡多个属性时很有用。每个延迟将应用于由 transition-property 属性定义的相应属性。例如，假设我们提供两个 transition-delay 值。第一个值影响 transition-property 属性给出的第一个属性。第二个 transition-delay 影响 transition 属性给出的属性名称列表中的第二个属性。

让我们看一些 transition-delay 属性的示例。

示例 1

在此示例中，我们使用了 transition-property、transition-duration 和 transition-delay 属性。延迟 0.5s 开始过渡效果，即 div 元素的背景颜色将在给定时间后更改。

输出

示例 2

在此示例中，有两个 div 元素。在第一个 div 中，我们使用了 transition-delay 属性的 initial 值。在第二个 div 中，我们应用了 transition-delay 属性的负值，即 -2s。我们需要将鼠标移到 div 元素上才能看到过渡效果。

输出

示例

现在，这里有另一个涉及多个过渡效果的示例。这里，过渡效果作用于宽度、高度和变换。还有一个以毫秒 (ms) 为单位的 transition-delay，即 2.5ms。

输出