动画运行时间 | animation-duration
animation-duration属性指定一个动画周期的时长。
/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;
/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;使用简写属性animation很方便地同时设置所有的动画属性。
Initial value | 0s |
|---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
值
<time>一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s。
注意：当您在一个animation-*属性上指定了多个以逗号分隔的值时，它们将以animation-name不同的方式分配给属性中指定的动画，具体取决于有多少个值。有关更多信息，请参阅设置多个动画属性值。
形式语法
<time>#示例
有关示例，请参阅CSS动画。
规格
Specification | Status | Comment |
|---|---|---|
CSS AnimationsThe definition of 'animation-duration' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | 3.0-webkit 43.0 | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | 10 | 12-o 12.10 | 4.0-webkit |
Feature | Android | Chrome | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
Basic support | 2.0-webkit | ? | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | No support | No support | 4.2-webkit | 43.0 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
