transition-timing-function用于控制CSS过渡动画的速度曲线，不改变总时长但影响变化速率。1. 预设值包括ease（慢-快-慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（更平滑）；2. 可用cubic-bezier(x1,y1,x2,y2)自定义贝塞尔曲线实现回弹等效果；3. 使用steps(n, jump-term)实现分步过渡，如帧动画；4. 简写transition中可直接指定timing-function，提升动画流畅度与真实感。
CSS 的 transition-timing-function 属性用于控制过渡动画在时间上的速度曲线，也就是动画“快慢变化”的方式。它不改变过渡的总时长，而是影响动画过程中每一步的变化速率。
常见的预设函数值
你可以使用一些内置的关键字来快速设置常用的速度曲线：
- ease：默认值，开始慢，中间快，结束慢。
- linear：匀速运动，从头到尾速度不变。
- ease-in：开始慢，逐渐加速，结尾最快。
- ease-out：开始快，逐渐减速，结尾最慢。
- ease-in-out：开始和结束都慢，中间加速，比 ease 更平滑。
例如，让一个元素在颜色变化时匀速过渡：
.box {
transition-property: background-color;
transition-duration: 0.5s;
transition-timing-function: linear;
}
使用贝塞尔曲线自定义速度（cubic-bezier）
如果预设函数不够用，可以用 cubic-bezier(x1, y1, x2, y2) 自定义速度曲线。这四个参数代表两个控制点的坐标，必须在 0 到 1 之间（x 值），y 值可以超出范围实现“回弹”等效果。
立即学习“前端免费学习笔记（深入）”；
比如，创建一个先回缩再快速弹出的效果：
.transition-bounce {
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
这种曲线常用于模拟物理动效，让动画更生动。
step() 函数：分步过渡
如果你想让过渡“一步步”地完成，而不是连续变化，可以使用 steps(n, jump-term) 或简写 step-start、step-end。
- steps(4, end)：把过渡分成 4 步，每步在阶段末尾跳变。
- step-start：第一步立即发生，类似“先跳再动”。
- step-end：最后一步才变化，中间保持原样。
适合做帧动画或数字翻牌效果：
.counter {
transition: opacity 1s steps(5, end);
}
简写形式中使用 timing-function
通常我们会用 transition 简写属性一起设置：
.element {
transition: all 0.3s ease-in-out;
}
顺序是：过渡属性、持续时间、timing-function、延迟（可选）。timing-function 可以放在 duration 后面，也可省略使用默认值。
基本上就这些。掌握 timing-function 能显著提升动画质感，关键是理解不同曲线对用户感知的影响。不复杂但容易忽略。
