CSS 属性animation-duration 定义动画完成一个循环所需的时间。
animation-duration属性动画通常使用起来很方便，因为它允许同时设置所有动画属性
属性值
CSS 属性animation-duration 可以具有以下值:
<time>: 运行一个完整周期的动画的持续时间可以是以秒 (s) 或毫秒 (ms) 为单位指定。重要的是该值必须是正数或零，并且必须指定单位。
如果未指定值，则使用默认值 0，以便动画可以继续（触发动画开始和动画结束事件）。
动画是否可见且持续时间为 0s 取决于 animation-fill-mode 值，如下所述:
动画的初始帧，由 animation-direction，将在animation-delay倒计时期间显示，如果animation-fill-mode为设置为向后或两者。
如果动画填充模式为动画延迟到期，则将显示动画的最后一帧（由动画方向确定）设置为向前或两者。
如果animation-fill-mode设置为none，则不会显示动画。
注意:当传递负值时，声明将被忽略，因为它无效。
注意:当传递负值时，声明将被忽略。在animation-*属性上指定多个逗号分隔的值，这些值将按照动画名称出现的顺序应用于动画。
注意:在定义 CSS 滚动驱动动画时，animation-iteration-count 的值决定了动画在时间轴进度过程中重复的次数。如果没有为animation-iteration-count指定值，则动画仅执行一次。 infinte 是一个有效值，但在 CSS 滚动驱动动画的情况下可能会导致动画无法工作。
语法
animation-duration = <time [0s,∞]># 适用范围
所有 HTML 元素、::before 和 ::after 伪元素。
CSS animation-duration: 基本示例
以下示例演示如何使用使用animation-duration属性指定持续时间。
在此示例中，我们有一个红色框，它从左向右水平移动，然后又回到左侧。
animation-duration 属性用于指定动画的持续时间（以秒或毫秒为单位）。
在这里，我们将持续时间设置为 2 秒（动画持续时间:2s；）。
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 400px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>