浏览器无法对十六进制颜色值（如#ff0000）进行插值运算，导致transition生硬跳变；应改用rgb()或hsla()等支持数值插值的格式，但需注意hsla中hue的环形特性可能引发反向绕圈问题，推荐优先使用rgb()并配合will-change或transform触发硬件加速，JavaScript动态改色时须强制重排或使用class切换。
transition 用 hex 颜色值会卡顿
浏览器无法对 #ff0000 这类十六进制颜色做插值运算，只能退化为离散帧切换，看起来就是“跳变”或“闪烁”。哪怕写了 transition: color 0.3s ease，实际动画也是生硬的。
必须改用支持数值插值的颜色表示法：
-
rgb(255, 0, 0)→rgb(0, 128, 255)：每个通道独立线性过渡 -
hsla(0, 100%, 50%, 1)→hsla(240, 100%, 50%, 1)：Hue 可连续变化，但注意 360°→0° 会反向绕圈（比如红→紫可能走远路）
hsla 的 hue 跨度大时动画方向异常
HSL 中 hue 是 0–360 的环形值，hsla(350, ...) 到 hsla(10, ...) 默认按 +20° 算，而不是 -20°，结果是逆时针转一大圈。肉眼看到的就是缓慢、反直觉的偏色过程。
解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 手动拆解成两段过渡（适合固定配色）
- 改用
color-mix()（Chrome 111+）或 CSS Houdiniworklet做自定义插值（复杂场景才需） - 更常用的是：统一用
rgb()，避开 hue 环问题 —— 大多数 UI 动画不需要精确色相控制
opacity + background-color 组合过渡仍不顺
即使颜色用了 rgb()，如果同时过渡 opacity 和 background-color，GPU 可能无法硬件加速，尤其在低配设备上掉帧。
检查并优化：
- 确认元素已触发合成层：
will-change: background-color或transform: translateZ(0) - 避免同时过渡多个高开销属性（如
box-shadow+background-color+opacity） - 用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，看是否频繁重绘
JavaScript 动态改色时 transition 失效
常见写法：el.style.backgroundColor = 'rgb(255, 0, 0)'; el.style.backgroundColor = 'rgb(0, 0, 255)'; —— 浏览器会合并两次赋值，只触发最终状态，没有中间帧。
正确做法是加一次重排触发：
el.style.backgroundColor = 'rgb(255, 0, 0)'; // 强制读取触发 layout void el.offsetWidth; el.style.backgroundColor = 'rgb(0, 0, 255)';
或者更稳妥：用 requestAnimationFrame 或直接改 class 控制状态，把过渡逻辑交给 CSS。
