MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

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

概述

animation-duration属性指定一个动画周期的时长。

默认值为0s,表示无动画。

使用简写属性animation很方便地同时设置所有的动画属性。

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

语法

Formal syntax: <time>#
animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms

<time>
一个动画周期的时长,单位为秒(s)或者毫秒(ms),无单位值无效。
注意:负值无效,浏览器会忽略该声明,但是一些早起的带前缀的声明会将负值当作0s。

示例

See CSS animations for examples.

标准

Specification Status Comment
CSS Animations
animation-duration
Working Draft  

浏览器兼容

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!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 3.0-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 2.0-webkit 5.0 (5.0)-moz
16.0 (16.0)
未实现 未实现 4.2-webkit

See also

文档标签和贡献者

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