transition-timing-function用于控制CSS过渡的速度曲线，不改变时长但影响快慢节奏。常用关键词包括ease（默认，先慢后快再慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（两端慢中间快）。还可使用cubic-bezier(x1, y1, x2, y2)自定义贝塞尔曲线实现弹性效果，如cubic-bezier(0.175, 0.885, 0.32, 1.275)用于按钮缩放。此外，steps(n)可实现分步动画，如steps(8)用于精灵图帧播放，step-start和step-end分别表示立即跳转或最后一步跳转。通过合理选择缓动函数可提升交互自然度与视觉个性。
在CSS中，transition-timing-function 用来控制过渡动画的“速度曲线”，也就是元素从起始状态到结束状态的变化节奏。它不会改变过渡的时长，而是决定这个过程中快慢的分布，比如是匀速、先快后慢，还是有弹跳感。
常用的预设缓动函数
可以直接使用CSS提供的关键词来快速设置常见效果：
- ease：默认值，开始慢，中间快，结束慢，有轻微缓动。
- linear：匀速运动，每一步变化速度一致，显得机械但稳定。
- ease-in：开始慢，逐渐加速，适合“淡入”或“滑入”场景。
- ease-out：开始快，逐渐减速，常用于“淡出”或“收起”动作。
- ease-in-out：两端慢，中间快，整体更柔和，适合来回切换的动画。
示例：
.box {
transition: all 0.5s ease-in-out;
}
使用贝塞尔曲线自定义速度（cubic-bezier）
如果预设不够用，可以用 cubic-bezier(x1, y1, x2, y2) 创建自定义的过渡曲线。这四个参数代表两个控制点的坐标（x和y都在0到1之间）。
立即学习“前端免费学习笔记（深入）”；
- 例如 cubic-bezier(0.68, -0.55, 0.27, 1.55) 可以做出带有“弹跳”或“回弹”效果的动画。
- 你可以在网上找 cubic-bezier 生成器（如 https://cubic-bezier.com）调出想要的曲线，然后复制参数到CSS中。
例子：让按钮点击时有弹性缩放效果
.btn {
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn:hover {
transform: scale(1.1);
}
step函数实现逐帧过渡
如果你想让过渡“一格一格”地跳转，而不是平滑进行，可以使用 steps(n) 或 step-start / step-end。
- steps(4)：把整个过渡分成4个等步，像翻页一样变化。
- step-start：第一步就跳到终点，之后保持不变。
- step-end：一直保持起始状态，最后一步直接跳到结束。
适用场景：模拟老式动画、灯号切换、sprite图帧播放等。
.light {
transition: background-position 1s steps(8);
}
基本上就这些。通过调整 timing function，你可以让页面交互更自然或更有个性。关键是多试几种曲线，看哪种最符合你的设计意图。 
