CSS | animation-duration 属性

animation-duration 属性指定动画完成一个周期所花费的时间（单位为秒或毫秒）。如果未设置该属性，则动画将不会执行。

语法

animation-duration: time | inherit;

• time: 定义动画完成一个周期所花费的时间，可以使用秒（s）或毫秒（ms）作为单位。默认值为 0s。
• inherit: 规定应继承该属性的值。

实例

示例1

以下示例演示如何使用 animation-duration 属性创建一个使用2秒完成一个周期的动画：

div {
  animation-name: my-animation;
  animation-duration: 2s;
}

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

示例2

以下示例使用多个关键帧来创建一个动画，使元素先向下移动，然后向右旋转，然后颜色变更到黄色，并在3秒后完成一个周期：

div {
  animation-name: my-animation;
  animation-duration: 3s;
}

@keyframes my-animation {
  0% {transform: translateY(0) rotate(0deg); background-color: red;}
  50% {transform: translateY(100px) rotate(90deg); background-color: blue;}
  100% {transform: translateY(0) rotate(180deg); background-color: yellow;}
}

注释

• animation-duration 属性可与 animation-name、animation-timing-function、animation-delay、animation-iteration-count、animation-direction 以及 animation-fill-mode 属性一起使用，以创建一个完整的动画。
• 当 animation-duration 属性的值为 0s 时，动画将不会执行。
• 如果多个动画共享相同的名称和持续时间，那么他们将同时执行。