CSS animation-duration 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

animation-duration是 CSS 中用于控制动画播放时长的属性，它定义了动画完成一个完整周期所需的时间。

animation-duration通常与@keyframes规则和其他animation-*属性一起使用。

animation-duration可以指定多个值（用逗号分隔）来为多个动画设置不同的持续时间。

常用的实例

接下来通过多个实例演示animation-duration属性的用法，来深化您对animation-duration属性的理解。

实例代码运行代码

复制

/* 单个动画 */
.box {
  animation-name: slide;
  animation-duration: 3s;
}

/* 多个动画 */
.element {
  animation-name: fade, rotate;
  animation-duration: 2s, 4s; /* fade动画2秒，rotate动画4秒 */
}

/* 关键帧定义 */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}