动画持续时间属性
最后更新：2026-09-13
animation-duration 动画持续时间属性
animation-duration 用于定义动画完成一个完整周期所需的时间长度。时间越短动画越快，时间越长动画越慢。该属性是 animation 简写的一部分，单独使用时可覆盖简写中的持续时间设置。
| 分类 | |
|---|---|
| 初始值 | 0s |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
animation-duration: <time>#;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<time> | 类型 | 动画持续时间 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation-duration | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| 所有主流浏览器均支持 | |||||
注意： 默认值为 0s，意味着动画会瞬间完成、看不到任何效果。使用 animation 时务必显式设置一个大于 0 的持续时间。
❓ 常见问题
Q可以用小数秒吗？
A可以。0.5s、0.25s 以及 150ms、800ms 都是合法值。对于微交互（按钮反馈、悬停提示），通常用 100ms~300ms，既能被感知又不拖沓；页面级入场动画建议 300ms~600ms。超过 1s 的长动画等待感明显，适合进度类、强调类场景。
Q多个动画可以设置不同持续时间吗？
A可以。animation-duration 支持逗号分隔的多个值，与 animation-name 中的动画名一一对应，例如 animation-name: a, b; animation-duration: 1s, 2s; 中 a 播放 1s、b 播放 2s。当值个数少于动画名时，缺少的部分会用第一个值补足。
Qanimation-duration: 0s 会怎样？动画还执行吗？
A不会产生可见的动画。0s 表示动画瞬间完成，关键帧状态直接跳到结束值，等效于没有动画。animation 简写的默认 duration 就是 0s，所以只写 animation: name; 而没有给出时间时动画不会播放，写动画时务必显式给出大于 0 的时长。
Qanimation-duration 和 transition-duration 有什么区别？
A前者定义 animation 动画一个完整周期的时长，配合 @keyframes 使用；后者定义 transition 过渡从起始值到结束值的时长，由状态变化触发。两者的值都是时间，都可以用逗号分隔多个值，但作用对象完全不同，不能互相替代。
🏷️ 相关属性
💡 相关案例
📚 相关教程
