transition-timing-function 控制css过渡速度曲线，常用选项包括：ease（默认，适合通用过渡）、linear（匀速，适合循环动画）、ease-in（渐显）、ease-out（渐隐，适合消失效果）、ease-in-out（对称缓动，适合切换）；可通过cubic-bezier()自定义贝塞尔曲线，如模拟弹跳或Material Design风格；steps()实现分步动画，如精灵图或翻牌效果；选择依据场景：按钮悬停用ease-out，模态框关闭用ease-out，加载旋转用linear，逐帧动画用steps()，结合调试工具优化效果。
在CSS中，transition-timing-function 决定了过渡动画的速度曲线，也就是动画在一段时间内如何加速或减速。选择合适的 timing function 能让界面变化更自然、更具吸引力。下面介绍常用的几种函数及其适用场景。
常见的 transition-timing-function 选项
这些是CSS内置的关键字函数，可以直接使用：
- ease：默认值，开始慢，中间快，结束慢。适合大多数通用过渡。
- linear：匀速运动，每一帧速度相同。适合循环动画或需要机械感的场景。
- ease-in：开始慢，逐渐加快。适合元素“出现”但不想太突兀的情况。
- ease-out：开始快，结束慢。适合元素“消失”或收起，给人柔和收尾的感觉。
- ease-in-out：两头慢，中间快。比 ease 更对称，适合来回切换的动画，比如开关按钮。
使用贝塞尔曲线自定义速度（cubic-bezier）
如果内置函数不够用，可以用 cubic-bezier(x1, y1, x2, y2) 自定义曲线。四个参数代表两个控制点，必须在 [0, 1] 区间内。
- cubic-bezier(0.42, 0, 0.58, 1)：接近默认的 ease，平滑自然。
- cubic-bezier(0.68, -0.55, 0.27, 1.55)：模拟弹跳效果，适合趣味性交互动画。
- cubic-bezier(0.17, 0.67, 0.83, 0.67)：类似 material design 的标准缓动，常用于卡片展开。
step() 函数：分步过渡
如果你希望过渡不是连续的，而是“一格一格”地变化，可以使用 steps(n, jump-start/jump-end)。
立即学习“前端免费学习笔记（深入）”；
- steps(4, end)：把过渡分成4个等步，每步停留后跳转，常用于精灵图动画或数字翻牌。
- steps(1, start)：立即跳到下一步，适合模拟老式幻灯片切换。
怎么选？看使用场景
选择 timing function 要结合用户体验和设计意图：
- 按钮悬停、菜单展开：用 ease-out 或 ease，显得轻盈。
- 模态框关闭、元素淡出：用 ease-out 让它“飘走”。
- 加载指示器旋转：可用 linear 保持节奏稳定。
- 想要科技感或品牌个性：尝试自定义 cubic-bezier 曲线。
- 做逐帧动画：果断上 steps()。