transition-timing-function用于控制CSS过渡速度变化，支持ease、linear、ease-in、ease-out、ease-in-out等预设函数，也可通过cubic-bezier()自定义贝塞尔曲线实现弹性或回弹效果，配合steps()可创建分步动画，如数字翻牌，合理使用可提升界面动效的自然度与交互质感。
CSS 中的 transition-timing-function 属性用于控制过渡动画的速度变化过程，也就是我们常说的“缓动效果”。它决定了属性值在过渡过程中如何随时间变化，从而影响动画的视觉感受。合理使用缓动函数可以让界面交互更自然、更贴近真实物理运动。
transition-timing-function 基本语法
该属性通常与 transition-property、transition-duration 一起使用，可以简写在 transition 中：
transition: width 2s ease-in-out; /* 或分开写 */ transition-property: width; transition-duration: 2s; transition-timing-function: ease-in-out;
其中 transition-timing-function 的取值决定了动画的加速度曲线。
常用的预设缓动函数
CSS 提供了几种内置的缓动函数，适用于大多数常见场景：
立即学习“前端免费学习笔记（深入）”；
- ease：默认值，开始慢 → 中间快 → 结束慢（轻微缓入缓出）
- linear：匀速运动，每帧速度相同，常用于旋转或平滑移动
- ease-in：开始慢，结束快，适合“淡入”或“出现”类动画
- ease-out：开始快，结束慢，让元素“柔和停下”，适合隐藏或收起
- ease-in-out：两端都缓，中间加速，整体最平滑，适合对称过渡
示例：按钮悬停变色使用 ease-in-out 更自然：
.button {
background: #007bff;
transition: background 0.3s ease-in-out;
}
.button:hover {
background: #0056b3;
}
自定义贝塞尔曲线 cubic-bezier()
如果预设函数不够用，可以用 cubic-bezier(x1, y1, x2, y2) 自定义缓动曲线。四个参数代表贝塞尔曲线的两个控制点，x 值必须在 [0,1] 范围内，y 可超出（实现回弹等效果）。
-
cubic-bezier(0.1, 0.7, 1.0, 0.1)：快速启动，缓慢结束，有弹性感 -
cubic-bezier(0.4, 0, 0.2, 1)：先加速再减速，比 ease-in-out 更明显 -
cubic-bezier(0, 0, 0.5, 2)：先向下冲再反弹回来，模拟弹簧效果
推荐使用在线工具如 cubic-bezier.com 可视化调整曲线并生成代码。
step() 函数：分步过渡
除了平滑曲线，还可以使用 steps(n, jump-start|jump-end|...) 实现逐帧式过渡，适合模拟翻页、帧动画等场景。
-
steps(4, end)：将过渡分为 4 步，每步在阶段末触发 -
steps(10, start)：10 步，每步在阶段初触发
例如实现一个数字翻牌效果：
.counter {
opacity: 1;
transition: opacity 1s steps(10, end);
}
opacity 会从 1 到 0 分 10 次突然变化，形成“咔哒”递减感。
基本上就这些。掌握 transition-timing-function 能显著提升动效质感。从 ease-in-out 开始尝试，再根据需要使用 cubic-bezier 或 steps，让交互更生动。不复杂但容易忽略细节。
