animation-duration 和 animation-timing-function 共同决定动画时长与速度变化，.box{animation-duration:2s}设持续时间，.slide-in{animation-timing-function:ease-out}控速曲线，搭配使用可提升动效自然度与用户体验。
在CSS动画中，控制动画的节奏和时长是实现流畅用户体验的关键。其中 animation-duration 和 animation-timing-function 是两个核心属性，它们分别决定动画运行多久以及动画过程中的速度变化模式。合理搭配使用这两个属性，可以让界面动效更自然、更具表现力。
animation-duration：设置动画持续时间
该属性定义动画完成一个周期所需的时间，单位为秒（s）或毫秒（ms）。
例如：
.box {
animation-duration: 2s;
}
上面代码表示动画将在2秒内完成一次播放。时间越短，动画越快；时间过长则可能让用户感觉迟缓。一般交互反馈类动画建议控制在0.3s~0.6s之间，过渡类动画可设为1s左右。
立即学习“前端免费学习笔记（深入）”；
小贴士：
- 小于0.1s的动画往往难以察觉，适合微交互。
- 多个元素动画可设置不同duration形成错落感。
- 移动端建议避免过长动画，防止用户等待。
animation-timing-function：控制动画速度曲线
这个属性决定了动画在持续时间内如何加速或减速。它通过贝塞尔曲线来描述速度变化。
常见取值包括：
- ease：默认值，慢开始，快中间，慢结束。
- linear：匀速运动，每帧速度一致。
- ease-in：慢开始，逐渐加速。
- ease-out：快开始，逐渐减速。
- ease-in-out：两端慢，中间快。
- cubic-bezier(n,n,n,n)：自定义贝塞尔曲线。
例如实现一个弹入效果：
.slide-in {
animation-duration: 0.5s;
animation-timing-function: ease-out;
}
这种组合让元素快速进入视野后柔和停下，符合视觉惯性。
实战技巧：匹配场景选择合适的组合
不同的交互场景适合不同的动画节奏。
比如：
- 按钮点击反馈：duration 0.2s + timing-function ease-out，轻快有响应感。
- 模态框弹出：duration 0.3s + ease-in-out，显得稳重不突兀。
- 加载动画旋转：duration 1s + linear，保持恒定节奏增强机械感。
- 页面切换滑动：duration 0.6s + cubic-bezier(0.25, 0.46, 0.45, 0.94)，模拟真实滑动手感。
使用浏览器开发者工具可以实时调试cubic-bezier曲线，找到最合适的加速度模型。
总结
animation-duration 和 animation-timing-function 共同塑造了动画的“性格”。掌握它们的搭配逻辑，能让动效不只是视觉装饰，而是提升可用性和情感传达的有效手段。实践中建议从标准值入手，逐步尝试自定义曲线，最终达到“动静皆宜”的效果。
基本上就这些，多试几次就能摸清节奏感。
