transition-duration

Avatar of Louis Lazaris
Louis Lazaris

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

transition-duration 属性通常用作 transition 简写的一部分,用于定义指定过渡的持续时间。也就是说,目标元素在两个定义状态之间过渡所需的时间长度。

.example {
    transition-duration: 3s;
}

该值可以是以下之一

  • 有效的时值(以秒或毫秒定义)
  • 以逗号分隔的时值列表,用于在单个元素上过渡多个属性

transition-duration 的默认值为 0s,这意味着不会发生过渡,属性更改将立即发生,即使定义了其他与过渡相关的属性。时值可以表示为基于小数的数字以实现更精确的计时,并且不允许负值。

以下 CodePen 展示了对使用 transition-duration 值为 1s 的框的悬停效果,以逐渐更改背景颜色

Check out this Pen!

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

.example {
    -webkit-transition-duration: 700ms;
    -moz-transition-duration: 700ms;
    -o-transition-duration: 700ms;
    transition-duration: 700ms;
}

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

相关属性

其他资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
支持 支持 4+ 10.5+ 10+ 2.1+ 3.2+