animation-duration

**animation-duration** CSS 属性设置动画完成一个循环所需的时间长度。

试试看

使用速记属性 animation 一次设置所有动画属性通常很方便。

语法

css
/* Single animation */
animation-duration: auto; /* Default */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

/* Global values */
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: revert-layer;
animation-duration: unset;

Values

auto

对于基于时间的动画，auto 等效于 0s 的值（见下文）。对于 CSS 滚动驱动动画，auto 用整个时间线填充动画。

<time>

动画完成一个循环所需的时间。这可以用秒 (s) 或毫秒 (ms) 指定。该值必须为正或零，并且需要单位。

如果没有提供值，则使用默认值 0s，在这种情况下，动画仍会执行（animationStart 和 animationEnd 事件会被触发）。当持续时间为 0s 时，动画是否可见将取决于 animation-fill-mode 的值，如下所述。

  • 如果 animation-fill-mode 设置为 backwards 或 both，则由 animation-direction 定义的动画的第一帧将在 animation-delay 倒计时期间显示。
  • 如果 animation-fill-mode 设置为 forwards 或 both，则动画的最后一帧将显示，由 animation-direction 定义，在 animation-delay 到期后。
  • 如果 animation-fill-mode 设置为 none，则动画将不会有任何可见效果。

注意：负值无效，会导致声明被忽略。一些早期的，带前缀的，实现可能将其视为与 0s 相同。

注意： 当你在 animation-* 属性上指定多个用逗号分隔的值时，它们将按照 animation-name 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参阅 设置多个动画属性值。

注意： 在创建 CSS 滚动驱动动画 时，以秒或毫秒为单位指定 animation-duration 值并没有实际意义。在测试中，它似乎对滚动进度时间线动画没有影响，而在视图进度时间线动画中，它似乎将动画推迟到时间线结束附近。但是，Firefox 要求设置 animation-duration 才能成功应用动画。因此建议将 animation-duration 设置为 1ms，以便动画在 Firefox 中正常工作，但不会受到太大影响。

正式定义

初始值0s
应用于所有元素，::before 和 ::after 伪元素
继承否
计算值按指定
动画类型不可动画

正式语法

animation-duration = 
  <time [0s,∞]>#

示例

设置动画持续时间

此动画的动画持续时间为 0.7 秒。

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

结果

将鼠标悬停在矩形上以启动动画。

有关更多示例，请参阅 CSS 动画。

规范

规范
CSS 动画级别 1
# animation-duration

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅