CSS3 transition-delay 属性
CSS3 transition-delay
transition-delay
属性是CSS3中用来确定过渡效果延迟时间的属性。该属性规定了一个元素何时开始过渡,并可以控制延迟开始的时间。这个属性通常是结合CSS3的 transition
属性来使用的。
语法结构
/* 起始时间格式 */
transition-delay: time;
/* 在多个过渡效果上设置起始时间 */
transition-delay: time time time time;
/* 全局全局值 */
transition-delay: initial|inherit;
值说明
值 | 描述 |
---|---|
time | 规定一个时间长度,单位可以是秒(s)或毫秒(ms) |
initial | 重置为默认初始值 |
inherit | 将属性的值设置为其父元素的值 |
使用说明
通常情况下, transition-delay
属性与 transition-duration
、transition-property
和 transition-timing-function
一起使用,这些属性共同控制了过渡效果的表现形式。
在以下示例中,我们通过 transition-delay
属性结合两个属性: transition-duration
和 transition-property
来实现一个过渡效果。当鼠标悬停在 HTML 元素上时,会触发过渡效果,从而改变大写字母的颜色。过渡效果从原始颜色 #000
过渡到最终颜色 #ff0000
。整个过渡动画的时间为1秒钟,且等待时间为0.2秒钟。
div {
transition-delay: 0.2s;
transition-duration: 1s;
transition-property: color;
}
div:hover {
color: #ff0000;
}
兼容性
属性 | Chrome | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
transition-delay | 26.0+ | 15.0+ | 6.0+ | 12.1+ | 10.0+ |
总结
虽然比较常用的是结合其他属性来实现过渡动画,但 transition-delay
作为一个单独的属性,依然有其重要的作用,能够使得过渡动画更为精准、美观。从以上示例可以看出,合理地设置 transition-delay
属性值,能够大幅提升动画的效果,展现更为丰富的交互作用。