MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

animation-delay

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

概述

animation-delay CSS属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度。

0s是该属性的默认值,代表动画在应用到元素上后立即开始执行。否则,该属性的值代表动画样式应用到元素上后到开始执行前的时间长度;

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如,如果设定值为-1s,动画会从它的动画序列的第1秒位置处立即开始。

If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.

通常用animation简写属性一次性设置动画效果较为方便。

初始值0s
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

animation-delay: 3s;
animation-delay: 2s, 4ms;

<time>
从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(m)和毫秒(ms)。如果未设置单位,定义无效。

正式语法

<time>#

示例

参见CSS animations

规范

规范 状态 备注
CSS Animations
animation-delay
Working Draft  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10 #
4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
? 12-o (Yes)-webkit

参见

文档标签和贡献者

 此页面的贡献者: teoli, Sebastianz, fskuok
 最后编辑者: teoli,