ease贝塞尔曲线在小范围高频变化中起始加速度高、结束减速不柔，易导致“冲”“顿”或弹跳感；应按场景选用定制cubic-bezier，如缩放用(0.3,0.1,0.4,1)、颜色过渡用(0.4,0.1,0.3,1)，并规范transition书写与属性匹配。
因为 ease 的贝塞尔曲线（cubic-bezier(0.25, 0.1, 0.25, 1)）在小范围、高频或颜色类变化中，起始加速度偏高、结束减速不够柔和，人眼会明显感知“冲”或“顿”。
ease 默认曲线在位移缩放中容易弹跳
图标 hover 缩放时用 ease，常出现“先猛缩再慢回”的弹跳感，尤其在 transform: scale(1.1) 这类小幅变化中更明显。
- 改用
cubic-bezier(0.3, 0.1, 0.4, 1)：降低起始斜率，延长收尾缓动段，视觉更顺滑 - 避免在快速连续交互（如反复 hover）中依赖
ease，它不保证首尾速度归零，易造成状态衔接断裂 - 若元素已启用
will-change: transform，但动画仍卡顿，大概率是曲线本身在作怪，而非性能问题
color / background-color 用 ease 会中间突变
从深蓝 #0a2e8c 到浅灰 #f0f0f0 时，ease 在明度中段插值过快，导致人眼捕捉到“一跳”，而非渐进过渡。
- 推荐改用
cubic-bezier(0.4, 0.1, 0.3, 1)：强化减速段，让明度/色相变化更符合视觉预期 - 确保起止色值格式一致（都用十六进制或都用
rgb()），transparent和rgba(0,0,0,0)不可插值，会直接跳变 - 不要把
transition写在:hover里——必须写在默认状态选择器中，否则退出无过渡
多个属性共用一个 ease 时行为被隐式复制
当写成 transition: transform 0.3s ease, opacity 0.2s;，opacity 实际会继承 ease，但很多人误以为它没配缓动函数就“不走 easing”。
立即学习“前端免费学习笔记（深入）”；
- 浏览器会静默补全缺失的
timing-function：只要写了第一个ease，它就会被复制到所有未显式声明的属性上 - 想给不同属性配不同曲线，必须一一对应：例如
transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s linear; - 数量不匹配时（比如 3 个 duration + 2 个 timing function），第三个属性会退回到
ease，而不是报错或忽略
移动端 touch 触发后 ease 感觉延迟不是曲线问题
iOS Safari 或部分安卓 WebView 中，touchstart 后立刻触发 transform 动画，常有 100–300ms 延迟——这不是 ease 的锅，而是浏览器在等双击确认。
- 加
touch-action: manipulation到容器，禁用双击识别，让触发动画立即响应 - 别在
touchstart里直接赋值style.transform，改用classList.toggle('active')切换预设 class -
ease-in-out在这里也救不了延迟，它只管动画过程，不管触发时机
真正影响自然感的，从来不是“有没有过渡”，而是“速度曲线是否贴合人眼对那个变化的物理直觉”。ease 是通用解，不是最优解；调参前先确认你是在优化位移、颜色、还是层级浮现——每种场景的“顺滑”定义完全不同。
