CSS | animation-duration 属性

在CSS中，使用 animation-duration 属性定义动画完成一个周期所需的时间。该属性是 animation 属性的一个子属性，它需要一个时间值作为参数，表示动画执行的持续时间。

语法

animation-duration: time

其中，time 可以是一个以秒（s）或毫秒（ms）为单位的时间值。例如：

animation-duration: 3s; /* 动画执行时间为3秒 */

示例

下面来看一个简单的示例，使用 animation-duration 属性定义动画执行的时间为2秒：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

代码解析：

• 通过 animation-name 属性定义动画的名称为 example。
• 通过 animation-duration 属性定义动画执行时间为2秒。
• @keyframes 规则定义动画的关键帧，这里定义了从红色到黄色的颜色变化。

兼容性

animation-duration 属性的兼容性良好，兼容性如下表：

| | IE | Edge | Firefox | Chrome | Safari | |---------------------------|------|------|---------|--------|--------| | animation-duration | 10+ | 12+ | 5+ | 43+ | 9.1+ | | -webkit-animation-duration | 9.0+ | 12+ | 5+ | 4.0+ | 3.1+ |

总结

animation-duration 属性是定义CSS动画执行时间的一个关键属性，它指定了动画完成一个周期所需的时间。可以通过该属性控制动画的速度和流畅度。