transition-delay

Avatar of Louis Lazaris
Louis Lazaris

DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

transition-delay 属性通常用作 transition 简写的一部分,用于定义延迟过渡开始的时间长度。

.delay-me {
  transition-delay: 0.25s;
}

该值可以是以下之一

  • 以秒或毫秒定义的有效时间值,例如 1.3s125ms
  • 逗号分隔的时间值列表,用于为单个元素的多个过渡定义单独的延迟值,例如 1s background-color, 350ms transform

transition-delay 的默认值为 0s,这意味着不会发生延迟,过渡将立即开始。 时间值可以表示为基于小数的数字,以实现更精确的计时。

当过渡的延迟值小于零时,它将导致过渡立即开始(无延迟),但是,过渡将在进程中途开始,就像它已经开始一样。

以下 Pen 显示了对使用 2stransition-delay 值和 1s 的过渡持续时间的框的悬停效果。

查看 Pen
过渡延迟演示
by CSS-Tricks (@css-tricks)
on CodePen.

现在将它与以下演示进行比较,该演示的延迟为 -1s,持续时间为 3s

查看 Pen
负过渡延迟演示
by CSS-Tricks (@css-tricks)
on CodePen.

请注意,在第二个示例中,只有实际过渡的最后三分之二可见,并且没有延迟。 负值消除了延迟,并有效地缩短了持续时间。

为了在所有支持的浏览器中兼容,需要供应商前缀,标准语法最后声明

.example {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}

IE10(第一个支持 transition-delay 的稳定版 IE)不需要 -ms- 前缀。

一个常见的用例是过渡分阶段进行

查看 Pen
错开动画
by Chris Coyier (@chriscoyier)
on CodePen.

相关属性

其他资源

浏览器支持

这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本上支持该功能。

台式机

ChromeFirefoxIEEdgeSafari
4*5*10125.1*

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.1*6.0-6.1*