animation-duration 决定动画快慢，值越小速度越快，结合 animation-timing-function 可调节运动节奏，实现自然流畅的动画效果。
在 CSS 动画中，animation-duration 和所谓的 “speed” 实际上是同一个概念的不同表达方式。理解它们之间的关系，有助于更精准地控制动画的快慢表现。
animation-duration 决定动画速度
animation-duration 属性定义的是动画完成一个完整周期所需的时间（以秒或毫秒为单位）。这个值越小，动画运行得越快；值越大，动画越慢。
例如：
-
animation-duration: 0.5s;— 动画在半秒内完成，看起来很快 -
animation-duration: 3s;— 动画持续 3 秒，显得缓慢柔和
所以，“动画速度” 并不是一个独立的 CSS 属性，而是由 animation-duration 直接体现的。
立即学习“前端免费学习笔记（深入）”；
与 animation-timing-function 配合调节“节奏”
虽然 animation-duration 控制整体快慢，但动画的“运动节奏”还受 animation-timing-function 影响。它决定了动画在时间段内的加速或减速方式。
常见取值包括：
-
linear— 匀速运动 -
ease— 默认，开始慢，中间快，结束慢 -
ease-in— 开始慢，逐渐加快 -
ease-out— 开始快，逐渐变慢 -
cubic-bezier(…)— 自定义缓动曲线
比如一个持续 2 秒的动画，使用 ease-in 会让人感觉“起步慢”，即使总时长没变，主观速度也不同。
实际应用中的配合技巧
要实现理想的动画效果，建议这样搭配：
- 先用 animation-duration 设定整体时间长度，控制快慢基调
- 再用 animation-timing-function 调整运动节奏，让动画更自然
- 短时间动画（如 0.3s）适合快速反馈（按钮点击），搭配
ease-out更顺滑 - 长时间动画（如 2s 以上）可配合
ease-in-out，避免突兀
基本上就这些。animation-duration 就是控制速度的核心，而 timing-function 让速度变化更有层次。合理组合，就能做出既快又舒服的动画。
