答案：timing-function 控制CSS动画的速度变化，常见值有 ease、linear、ease-in、ease-out 和 ease-in-out，可使用 cubic-bezier() 自定义曲线，选择应基于动画行为和用户体验，如按钮点击用 ease-out，加载旋转用 linear，模态框弹出可用弹性曲线增加亲和力。
在CSS动画中，timing-function 决定了动画在时间轴上的速度变化方式。换句话说，它控制“动画是如何进行的”——是匀速、先快后慢，还是有弹跳感。合理选择 timing-function 能让界面动效更自然、更具表现力。
常见的 timing-function 选项
CSS 提供了几种预设的 timing-function 值，适用于大多数常见场景：
- ease：默认值，动画先加速再减速（缓入缓出），适合大多数过渡效果。
- linear：匀速运动，每一帧的速度都一样，常用于旋转或循环动画。
- ease-in：缓慢开始，结束较快，适合淡入或从外进入的元素。
- ease-out：快速开始，缓慢结束，常用于退出动画，给人“收尾柔和”的感觉。
- ease-in-out：开始和结束都缓慢，中间快，比 ease 更对称，适合来回切换的动画。
cubic-bezier() 自定义贝塞尔曲线
如果预设不够用，可以使用 cubic-bezier(x1, y1, x2, y2) 来自定义速度曲线。它通过两个控制点定义一条三次贝塞尔曲线，横轴是时间（0 到 1），纵轴是完成进度（0 到 1）。
关键规则：
立即学习“前端免费学习笔记（深入）”；
- 四个参数必须是 0 到 1 之间的数（x 值），但 y 值可以超出范围，实现“回弹”或“ overshoot”效果。
- 例如：
cubic-bezier(0.42, 0, 0.58, 1)是 ease 的标准值。 - 想让动画起始更猛？试试
cubic-bezier(0.68, -0.55, 0.27, 1.55)，y 值超出范围带来弹性感。
如何选择合适的 timing-function？
不是所有动画都适合 ease。选择应基于元素的行为和用户体验预期：
- 按钮点击反馈用 ease-out，快速响应后柔和收尾。
- 加载旋转图标用 linear，保持节奏稳定不干扰用户注意力。
- 模态框弹出可用 cubic-bezier(.17,.67,.83,.67)，模拟轻微弹跳，增加亲和力。
- 长距离滑入动画适合 ease-in 开头，避免突兀。
基本上就这些。掌握 timing-function 的核心是理解“速度如何随时间变化”。多尝试不同曲线，配合开发者工具中的动画调试面板，能更快找到最合适的动效节奏。
