animation-timing-function用于控制动画速度曲线，影响动画流畅度。常用关键字如ease、linear、ease-in、ease-out、ease-in-out可实现不同缓动效果，cubic-bezier()函数支持自定义贝塞尔曲线，结合关键帧能分段设置速度，配合animation-duration优化时长，使动画更自然。
CSS 的 animation-timing-function 属性用于控制动画在关键帧之间执行的速度曲线，直接影响动画的“感觉”——是生硬还是流畅，是弹跳还是缓入缓出。掌握它的使用技巧，能让动画更自然、更具表现力。
理解常见的 timing-function 值
该属性接受多个预设关键字和自定义贝塞尔曲线。常用的关键字包括：
- ease：默认值，开始慢 → 中间快 → 结束慢，适合大多数过渡
- linear：匀速运动，机械感强，常用于旋转或循环动画
- ease-in：缓慢开始，突然结束，适合“出现”类动画
- ease-out：快速开始，缓慢结束，让元素“柔和着陆”
- ease-in-out：两端慢中间快，对称且优雅，适合来回动画
例如，一个淡入动画使用 animation-timing-function: ease-in; 会比 linear 更有层次感。
使用 cubic-bezier() 自定义速度曲线
通过 cubic-bezier(x1, y1, x2, y2) 可创建任意速度曲线。四个参数代表贝塞尔曲线的两个控制点（x 和 y 值必须在 0~1 之间，但可超出用于特殊效果）。
立即学习“前端免费学习笔记（深入）”；
- 标准 ease 曲线：cubic-bezier(0.25, 0.1, 0.25, 1.0)
- 强烈弹跳进入：cubic-bezier(0.68, -0.55, 0.27, 1.55)
- 快速启动后缓慢结束：cubic-bezier(0.77, 0, 0.18, 1)
推荐使用在线工具如 https://cubic-bezier.com 调试并生成理想曲线。
结合关键帧实现分段速度控制
可在 @keyframes 中为不同阶段设置不同的 timing-function，使用 animation-timing-function 在关键帧内局部覆盖。
例如，让元素先加速冲出，再缓缓停下：
@keyframes bounce-in {
0% {
transform: scale(0);
animation-timing-function: cubic-bezier(0.22, 0.04, 0.78, 0.44);
}
60% {
transform: scale(1.1);
animation-timing-function: ease-out;
}
100% {
transform: scale(1);
}
}
这样，从 0% 到 60% 使用自定义加速曲线，从 60% 到 100% 缓慢回弹。
与 animation-duration 配合优化体验
timing-function 再好，若 duration 不合理也会失败。建议：
- 微交互动画控制在 200ms–500ms，搭配 ease-out 更显轻快
- 较长动画（>1s）适合用 ease-in-out 避免头尾突兀
- 加载动画可用 linear 保持节奏稳定
例如按钮点击反馈：0.3s + ease-out，既迅速又不生硬。
基本上就这些。灵活运用 timing-function，能显著提升界面动效的专业感和用户体验。关键是多尝试、多对比，找到最贴合场景的节奏。
