transition-timing-function可用值包括ease、linear、ease-in、ease-out、ease-in-out五个关键字，以及cubic-bezier()和steps()两个函数；ease为默认值，呈缓入缓出；linear为匀速；ease-in仅缓入；ease-out仅缓出；cubic-bezier()支持自定义贝塞尔曲线，y值可超[0,1]实现过冲或回弹；steps()用于分步动画，如打字、雪碧图切换。
transition-timing-function 有哪些可用值
CSS 过渡节奏由 transition-timing-function 控制，它决定属性值随时间变化的快慢分布。浏览器原生支持 5 个关键字值：ease、linear、ease-in、ease-out、ease-in-out，外加两个函数式写法：cubic-bezier() 和 steps()。
其中 ease 是默认值（等价于 cubic-bezier(0.25, 0.1, 0.25, 1)），开头慢、中间快、结尾又慢；linear 是匀速；ease-in 只加速不减速，适合“弹出”类入场；ease-out 只减速不加速，适合“收起”类退场。
cubic-bezier() 怎么调出想要的曲线
cubic-bezier(x1, y1, x2, y2) 是贝塞尔曲线函数，四个参数必须在 [0, 1] 范围内。x 轴代表时间进度（0→1），y 轴代表属性变化比例（0→1）。关键点在于：y 值可以超出 [0, 1]，从而实现“回弹”或“过冲”效果。
- 想让元素先反向移动再正向弹出？试试
cubic-bezier(0.5, -0.5, 0.5, 1.5) - 模拟物理阻尼振动？用
cubic-bezier(0.34, 1.56, 0.64, 1)（注意 y1 > 1） - 调试时建议打开 Chrome DevTools → Elements → Styles 面板，点击 timing function 小图标，直接拖动控制点实时预览
.bounce {
transition: transform 0.4s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
steps() 适合哪些场景
steps(n, [start | end]) 把过渡切成 n 段“帧”，不平滑，常用于模拟打字、进度条分段填充、翻页动画或 sprite 动画切换。
立即学习“前端免费学习笔记（深入）”；
-
steps(5, start)表示在时间起点立即跳到第 1 步，共分 5 次跳跃完成 -
steps(10, end)是默认行为：在时间终点才跳最后一步，前 9 次都在中间停留 - 配合
background-position做雪碧图动画时，务必确保每帧宽度/高度一致，且总步数与图中帧数严格对应
.typewriter {
width: 0;
overflow: hidden;
white-space: nowrap;
border-right: 1px solid;
animation: typing 3s steps(20, end), blink 0.75s step-end infinite;
}
@keyframes typing { to { width: 100%; } }
transition-timing-function 的继承与覆盖规则
它不继承，但会受层叠顺序和简写声明影响。最容易踩坑的是：transition 简写会重置所有子属性，包括 transition-timing-function。
- 单独设置节奏：用
transition-timing-function: ease-in;，安全 - 用简写时务必带上节奏值：
transition: opacity 0.3s ease-in, transform 0.2s cubic-bezier(0.1, 0.8, 0.9, 0.2); - 多个属性过渡不同节奏？必须显式列出每个属性 + 时间 + 函数，不能靠“一个 timing function 管全部”
- 伪类（如
:hover）中只改了transition-property或transition-duration，而没提transition-timing-function，那它会沿用上一层定义的值（不是默认值）
