默认 ease 卡顿因其贝塞尔曲线起止加速度突兀，需按动效目的定制：入口用缓入、反馈用过冲、长位移用先快后慢；transition 与 @keyframes 的 easing 作用域不同，须显式声明；避免动画 height/width 等低效属性，优先用 transform/opacity；善用 DevTools 调试并合理使用 will-change。
为什么 ease 不够用，动画还是卡顿？
默认的 ease 确实比 linear 好些，但它只是标准贝塞尔曲线 cubic-bezier(0.25, 0.1, 0.25, 1)，起始加速和结束减速都偏“急”。真实交互中，人眼对突兀的加速度变化极其敏感——比如 transform: translateX 突然启动、或 opacity 在最后 10% 才开始明显变淡，都会显得生硬。
真正平滑的关键不是换一个预设值，而是根据动效目的定制节奏：
- 入口动画（如弹出菜单）适合「缓入」：
cubic-bezier(0.4, 0, 0.2, 1)（ease-in-out太对称，不够自然） - 反馈类微动效（如按钮按压）用「缓入缓出但更柔和」：
cubic-bezier(0.34, 1.56, 0.64, 1)（允许 y 超出 [0,1] 范围，产生轻微过冲感） - 长距离位移（如页面切换）建议「先快后慢」：
cubic-bezier(0.22, 0.61, 0.36, 1)，避免开头拖沓
transition-timing-function 和 @keyframes 的 easing 写法差异
两者都能用 cubic-bezier()，但作用范围不同：前者控制整个过渡的节奏，后者只影响单个关键帧之间的插值。容易忽略的是——@keyframes 中每个 to 或 from 之间默认是 ease，不显式声明就会覆盖你在 transition 里写的 easing。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
button {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
button:hover {
animation: jiggle 0.4s; /* 这里没写 timing-function，会回退到 ease */
}
@keyframes jiggle {
0% { transform: rotate(0); }
25% { transform: rotate(-5deg); }
50% { transform: rotate(0); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0); }
}正确做法是把 easing 显式绑定到动画本身：
button:hover {
animation: jiggle 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}哪些属性加了 easing 也白搭？
CSS 动画生硬，有时根本不是 timing-function 的问题，而是动了不该动的属性。浏览器对以下属性的动画优化极差，即使配上最柔顺的 cubic-bezier，也会因强制重排（reflow）或低效重绘（repaint）导致掉帧：
-
height/width（触发布局计算） -
margin/padding（同上） -
top/left（脱离文档流时仍可能触发合成层判断延迟） -
box-shadow（尤其带模糊值时，GPU 合成开销大）
替代方案优先级：
- 位移 → 改用
transform: translateX/Y/Z() - 缩放 → 用
transform: scale() - 透明度 → 用
opacity（注意：它本身支持硬件加速） - 阴影微调 → 改用
transform: translateZ(0)强制提升为合成层，再配合轻量filter: drop-shadow()
调试 easing 的实际工具和技巧
别靠猜。Chrome DevTools 的动画检查器（Animations tab）能实时拖拽贝塞尔手柄，但要注意两个细节：
- 勾选「Show timeline» > «Enable animation timeline» 才能看到每帧的 velocity 曲线
- 右键关键帧 → «Edit timing function» 可直接粘贴自定义
cubic-bezier(x1,y1,x2,y2) - 用
will-change: transform提前告知浏览器该元素将动画，避免首帧卡顿（但别滥用，会增加内存）
最后提醒：easing 是锦上添花，不是救命稻草。如果动画本身持续时间过短（
