transition-timing-function 只控制动画快慢的分布方式，不决定整体快慢；需与 transition-duration 配合才能形成完整节奏感。

直接说结论：transition-timing-function 不控制“快慢”，只控制“快慢怎么分布”——它决定动画在 0%→100% 过程中每一帧的进度比例，和 transition-duration 配合才构成完整节奏感。

为什么写了 ease 却看起来不自然

因为 ease（默认值）等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，它的起始加速度偏高、结束减速不够柔和，尤其在小范围位移（比如 icon 缩放、边框粗细变化）时容易显得“冲”或“顿”。

• 图标 hover 缩放用 ease 常会感觉“弹一下”，换成 cubic-bezier(0.3, 0.1, 0.4, 1) 更顺滑
• 菜单收起用 ease-out 可能收得太急，改用 cubic-bezier(0, 0.3, 0.5, 1) 能延长减速段
• 旧版安卓 WebView 对 linear 解析不稳定，真要匀速建议直接写 cubic-bezier(0, 0, 1, 1)

多个过渡属性怎么配不同缓动函数

当同时过渡多个属性（如 transform 和 opacity），必须保证 transition-property、transition-duration、transition-timing-function 三者数量严格一致，顺序一一对应。

Boxy

Boxy是一款AI开发辅助工具，CodeSandbox推出的AI编程助手。

下载

• 写法示例：transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s linear;
• 如果只写一个 transition-timing-function（如 ease-in-out），它会被复制到所有属性上
• 数量不匹配时，浏览器静默截断多余项：比如定义了 3 个 duration 但只写 2 个 timing function，第三个属性会回退到默认 ease

step() 和 cubic-bezier() 别混用场景

steps() 是离散跳变，cubic-bezier() 是连续变速，二者语义完全不同，强行混搭没意义。

• steps(4, end) 适合 sprite 动画、开关状态切换（比如 checkbox 从 ☐ → ☑ 的“咔哒”感）
• cubic-bezier(0.175, 0.885, 0.32, 1.275) 适合按钮点击缩放，模拟轻微弹性
• 想让 height 过渡有“折叠感”？别用 steps() —— height 不支持离散过渡，会退化为 linear
• Chrome DevTools 的动画检查器里点 timing function 小图标，可以直接拖动贝塞尔控制点实时调参，比手算系数靠谱得多

真正难的不是选哪个关键词，而是理解：同一组 duration + timing-function 在 transform 上很顺，在 width 上可能卡顿——因为后者触发 layout。缓动函数再漂亮，也救不了重排重绘。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！