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+ |
有人知道在哪里可以找到关于特定属性的供应商前缀不再需要的浏览器版本的参考资料吗?
看起来它们现在应该已经过时了,但我没有找到简洁的信息。
感谢任何回答的人!
您可以在 caniuse.com 上查看完整的浏览器支持信息。如果您点击“显示全部”按钮,它将显示哪些版本需要前缀。