动画卡顿常因 transition-timing-function 选错：ease 开头加速猛、结尾减速急，建议小位移用 ease-out 或 cubic-bezier(0.34,1.56,0.64,1)；需确保 transition-property 和 duration 同时声明，避免 JS 内联样式覆盖 CSS 规则。
transition-timing-function 值选错导致动画卡顿
默认的 cubic-bezier(0.25, 0.1, 0.25, 1)（也就是 ease）在多数交互中确实不够柔和，尤其在小范围位移或颜色渐变时，开头加速太猛、结尾减速太急，人眼会明显感知“弹跳感”。这不是浏览器 bug，是贝塞尔曲线控制点位置没对齐你的动效意图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
ease-out替代ease：适合「收尾要轻」的场景，比如下拉菜单收起、提示框淡出 - 小幅度移动（如 toggle 开关滑块）优先试
cubic-bezier(0.34, 1.56, 0.64, 1)：这个值在 MDN 动效指南里被称作“缓入缓出加强版”，开头不突兀、结尾不拖沓 - 避免直接写
linear：虽然平滑，但缺乏节奏感，用户反而觉得“机械”，只适合 loading 进度条这类需要严格线性反馈的场景
CSS 自定义贝塞尔曲线调试技巧
手写 cubic-bezier() 参数容易凭感觉乱调，结果更生硬。关键不是记住数值，而是理解两个控制点（x1,y1）和（x2,y2）的实际影响：y 值决定速度变化陡峭程度，x 值决定时间分布权重。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Elements 面板 → 找到带
transition的元素 → 点击右侧 timing function 小图标（那个齿轮/曲线图标），直接拖动控制点实时预览 - 如果 y1 > 1 或 y2 cubic-bezier(0.17, 1.89, 0.5, -0.5)），动画会“超调”——先反向运动再回正，这在按钮 hover 中可能有趣，但在表单状态切换里就是干扰项
- 移动端慎用 y 值 > 1.5 的曲线：部分低端安卓 WebView 对超调渲染不一致，可能出现闪帧
transition 属性漏写导致曲线失效
最常踩的坑：写了 transition-timing-function，但没配对声明 transition-property 或 transition-duration，整条过渡规则直接被浏览器忽略，退化成无动画的瞬间切换——你以为是曲线问题，其实是压根没生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别单独写
transition-timing-function，必须和transition-property+transition-duration成套出现，例如：transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); - 用简写
transition时，timing function 必须紧跟在 duration 后面，顺序不能错：transition: background-color 0.2s ease-in-out;✅，transition: background-color ease-in-out 0.2s;❌（后者会被整个忽略） - 检查 computed 样式里的
transition字段是否为空——空就说明语法或组合有误
JavaScript 触发动画时 timing function 被覆盖
用 JS 改 class 或内联样式触发动画时，如果同时存在多个 transition 声明（比如 CSS 文件里一套、JS 里 element.style.transition = '...' 又设一套），后者会完全覆盖前者，包括 timing function。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- JS 中尽量只改 class，把所有 transition 相关规则收在 CSS 里，用 class 切换控制状态，避免内联 style 干扰
- 真要用 JS 控制，统一用
element.style.transition完整重写整条规则，不要只改其中一部分，例如：el.style.transition = 'opacity 0.25s cubic-bezier(0.2, 0.8, 0.4, 1)'; - 注意伪类（如
:hover）里的 transition 和 JS 添加的 class 规则优先级：class 通常更高，但若 hover 规则用了!important，JS 设置可能被压制
