选错 transition-timing-function 会导致颜色过渡生硬，因默认 ease 在明度/色相大跨度时易出现中间突变；推荐用自定义 cubic-bezier(0.4, 0.1, 0.3, 1) 或 @property 实现 HSL 插值，并配合硬件加速优化渲染。
transition-timing-function 选错导致颜色过渡生硬
CSS 中 transition 默认使用 cubic-bezier(0.25, 0.1, 0.25, 1)（即 ease），它在颜色变化时容易出现中间段突变、起止处拖沓，尤其在 background-color 或 color 的明度/色相跨度较大时，人眼会明显感知“跳变”。
真正影响观感的不是过渡是否“有”，而是速度曲线是否匹配人眼对色彩变化的预期——比如从深蓝到浅灰，更适合缓慢起步 + 均速中段 + 温和收尾。
-
ease-in-out起止缓、中间快，适合小幅度明度变化，但大跨度仍显“中间一冲” -
linear均速，机械感强，缺乏呼吸感，尤其在 HSL 或 LAB 空间插值时更不自然 - 自定义
cubic-bezier()是最直接解法，推荐从cubic-bezier(0.4, 0.1, 0.3, 1)（接近ease-out加强版）开始微调
用 steps() 模拟逐帧过渡反而更顺？
当颜色变化需强调节奏感或配合动画节拍（如 UI 状态灯、加载指示器），steps() 可打破连续插值的“模拟感”。但它不是用来“平滑”的，而是用可控跳跃制造确定性视觉反馈。
关键点：必须配合足够多的 step 数量 + 合理的过渡时长，否则会卡顿；且只适用于离散色阶场景（如 5 级状态色）。
立即学习“前端免费学习笔记（深入）”；
- 写法：
transition: background-color 0.6s steps(8, end) -
steps(8, end)表示把整个过渡切为 8 段，每段结束时跳变（end），比start更符合直觉 - 若色值本身是 CSS 自定义属性（
--color-step-1到--color-step-8），可用@property配合transition实现更稳的 steps 插值
HSL vs RGB 插值对过渡自然度的影响
浏览器对 color 过渡默认按 RGB 空间线性插值，但人眼对色相（H）、饱和度（S）、亮度（L）的敏感度非线性。例如从 hsl(240, 100%, 20%)（深蓝）到 hsl(0, 100%, 80%)（亮红），RGB 插值会先变紫再变橙，产生意外中间色；而 HSL 插值路径更符合直觉。
- CSS 中直接写 HSL 值（如
color: hsl(240, 100%, 20%)）并不能强制 HSL 插值——浏览器仍按 RGB 计算 - 真·HSL 插值需用
@property显式声明类型：@property --bg-hue { syntax: "再绑定到"; inherits: false; initial-value: 240deg; } background-color: hsl(var(--bg-hue), 100%, 50%) - 注意：
@property在 Safari 16.4+ 和 Chrome 107+ 支持，旧版本需降级为 JS 控制或接受 RGB 插值偏差
硬件加速与重绘开销常被忽略
即使 timing function 写得再准，若触发全量重排（reflow）或频繁重绘（repaint），过渡依然卡顿。颜色变化本应只触发合成层更新（compositing），但某些属性组合会破坏该优化。
- 避免同时过渡
color和border-color—— 它们可能归属不同渲染层 - 确保目标元素已启用硬件加速：
transform: translateZ(0)或will-change: background-color（慎用，仅对高频变化元素） - 检查 DevTools → Rendering → “Paint flashing”：若颜色过渡时大面积绿色闪烁，说明在做软渲染（CPU 绘制），此时换用
background-image: linear-gradient(...)模拟纯色有时更稳
