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>