CSS animation-duration 属性 详解
css3基础 2022-07-14 15:51:40小码哥的IT人生shichen
CSS animation-duration 属性
定义和用法
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
另请参阅：
CSS3 教程：CSS 动画
HTML DOM 参考手册：animationDuration 属性
实例
为 @keyframes 动画规定一个名称：
div {
animation-duration: 3s;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove infinite;
animation-duration:2s;
/* Safari and Chrome */
-webkit-animation:mymove infinite;
-webkit-animation-duration:2s;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>
<div></div>
<p><b>注释：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
animation-duration: time;
| 值 | 描述 |
|---|---|
| time | 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。 |
技术细节
| 默认值： | 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationDuration="3s" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 43.0 3.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
