参考手册
CSS 属性大全
transition
transition-duration
返回 CSS 属性大全

CSS transition-delay 属性

CSS transition-delay 属性规定了在过渡效果开始作用之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的 CSS 属性（transition-property）

实例

在过渡效果开始前等待 2 秒：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. width:100px;
  8. height:100px;
  9. background:blue;
  10. transition-property:width;
  11. transition-duration:5s;
  12. transition-delay:2s;
  14. /* Firefox 4 */
  15. -moz-transition-property:width;
  16. -moz-transition-duration:5s;
  17. -moz-transition-delay:2s;
  19. /* Safari and Chrome */
  20. -webkit-transition-property:width;
  21. -webkit-transition-duration:5s;
  22. -webkit-transition-delay:2s;
  24. /* Opera */
  25. -o-transition-property:width;
  26. -o-transition-duration:5s;
  27. -o-transition-delay:2s;
  28. }
  30. div:hover
  31. {
  32. width:300px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  38. <div></div>
  40. <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
  42. <p><b>注释：</b>过渡效果会在开始前等待两秒钟。</p>
  44. <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
  46. </body>
  47. </html>
运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

属性
transition-delay26.04.0 -webkit-10.016.04.0 -moz-6.13.1 -webkit-12.110.5 -o-

定义和用法

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

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

语法

  1. transition-delay: time;
值描述
time规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
transition
transition-duration

分类导航