CSS animation-duration 属性定义了动画完成单个周期所需的时间。
语法
animation-delay: time | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| time | 以秒或毫秒为单位指定。这指定了动画完成一个周期所需的长度。 |
| initial | 这会将属性设置为其初始值 |
| inherit | 这将继承父元素的属性 |
CSS animation-duration 属性示例
下面列出的示例将说明具有不同值的动画持续时间属性。
设置动画持续时间
以下示例演示如何使用 animation-duration 属性创建具有指定持续时间的简单动画。
动画持续时间为 0 秒
当 animation-duration 属性的持续时间设置为 0s 时，不会发生动画。在以下示例中，由于持续时间设置为 0s，因此考虑的红色框保持静止
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move;
animation-duration: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 400px;
}
}
</style>
</head>
<body>
<h2>CSS Animation Duration Property</h2>
<div class="box"></div>
</body>
</html>
积极的动画持续时间
当 animation-duration 属性的持续时间设置为正值时，动画需要很长时间才能完成一个周期。在考虑的示例中，红框需要 5 秒才能完成一个周期。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 400px;
}
}
</style>
</head>
<body>
<h2>CSS Animation Duration Property</h2>
<div class="box"></div>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| animation-duration | 43 | 10.0 | 16.0 | 9.0 | 30.0 |
