transition-timing-function 控制CSS过渡的速度曲线，常见取值有 ease、linear、ease-in、ease-out、ease-in-out 及 cubic-bezier()，不同场景如按钮悬停、菜单展开需匹配相应函数以提升交互流畅性，结合开发者工具可精准调试动画节奏。
在使用CSS实现元素过渡效果时，transition-timing-function 是控制动画速度曲线的关键属性。它决定了过渡过程中动画的快慢变化方式，直接影响用户体验的流畅感。选择合适的过渡函数能让界面交互更自然、更符合直觉。
理解 transition-timing-function 的作用
该属性定义了过渡效果在时间上的分配方式，即“动画在一段时间内如何加速或减速”。虽然过渡总时长由 transition-duration 决定，但具体每一帧的变化速率由 timing function 控制。
常见取值包括：
- ease：默认值，先慢→快→慢，适合大多数场景
- linear：匀速运动，速度不变，常用于旋转或循环动画
- ease-in：开始慢，结束快，适合“出现”类动画
- ease-out：开始快，结束慢，让元素“柔和着陆”
- ease-in-out：两端慢，中间快，对称且平滑
- cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，精确控制动画节奏
根据交互意图选择合适的函数
不同交互动画应匹配不同的时间函数，以增强用户感知：
立即学习“前端免费学习笔记（深入）”；
- 按钮悬停：用 ease-out 让颜色或阴影变化更自然，避免突兀
- 菜单展开：建议使用 ease 或 ease-in-out，使展开和收起都平稳
- 提示框弹出：可尝试 cubic-bezier(0.18, 0.89, 0.32, 1.28) 模拟轻微弹跳感
- 加载旋转：使用 linear 保持匀速转动，体现持续性
使用贝塞尔曲线定制动画节奏
通过 cubic-bezier() 可创建个性化动画曲线。四个参数代表两个控制点坐标（x1, y1, x2, y2），值通常在 0–1 之间，但也可超出以实现特殊效果。
例如：
- cubic-bezier(0.68, -0.55, 0.27, 1.55)：先回拉再快速弹出，适合强调操作
- cubic-bezier(0.4, 0.0, 0.2, 1)：类似 Material Design 的标准缓动
推荐使用在线工具如 CubicBezier.com 或浏览器开发者工具直观调试曲线。
实际应用示例
一个常见的按钮悬停效果可以这样写：
<button style=" transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); "> Hover Me </button>
这个曲线让按钮在进入时稍快启动，结尾柔和，比默认的 ease 更显现代感。
基本上就这些。掌握 timing function 的选择逻辑，能让过渡不再只是“动起来”，而是“动得合理”。
