transition-delay

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概要

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

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

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

初始值0s
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
计算值as specified
Animation typediscrete

语法

/* <time>?值 */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* 全局变量 */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

取值

<time>
表明动画效果属性生效之前需要等待的时间。

语法形式

<time>#

举例

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

 说明

 说明 状态  注释
CSS Transitions
transition-delay
Working Draft Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

?特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 1.0 -webkit (en-US) 4.0 (2.0) -moz (en-US)
16.0 (16.0)
10.0 11.6 -o (en-US)
12.10
3.0 -webkit (en-US)
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 2.1 -webkit (en-US) 4.0 (2.0) -moz (en-US)
16.0 (16.0)
? 10.0 -o (en-US)
12.10[1]
3.2 -webkit (en-US)

[1] 详见 blog post about Opera 12.50.

扩展阅读