transition不起作用需检查：color和background-color是否为明确颜色值；transition必须写在默认样式中；优先用hsl()实现顺滑过渡；合理设置cubic-bezier()曲线而非依赖delay；注意JS批量修改时的重绘触发时机。
transition不起作用？检查color和background-color是否可动画
CSS的transition对color和background-color天然支持，但前提是这两个属性本身是“可插值”的——也就是说，起始值和结束值都得是明确的颜色值（比如#fff、rgb(255, 0, 0)、hsl(0, 100%, 50%)），不能是inherit、transparent（部分旧浏览器）、currentcolor（某些场景下不触发过渡）或unset。
- 常见错误：给
background-color设了transparent，再切到#ff6b35，Chrome能动，Safari 15.6之前可能直接跳变 - 稳妥做法：统一用
rgba()，比如从rgba(255, 107, 53, 0)过渡到rgba(255, 107, 53, 1)，透明度可控且兼容性更好 - 注意：
background简写会重置整个背景（含background-image），可能导致background-color过渡被覆盖或中断
transition写在: hover里还是元素默认样式里？
必须写在**默认（非伪类）样式中**，否则鼠标移入时才声明transition，浏览器没时间触发过渡，表现为“瞬间切换”。
- 错误写法：
a { color: #333; } a:hover { color: #007bff; transition: color 0.3s; }→ 移入无过渡 - 正确写法：
a { color: #333; transition: color 0.3s; } a:hover { color: #007bff; } - 如果只想在移入时过渡、移出时不过渡，可以单独控制：用
transition-property+:hover组合，但更推荐统一写法，避免意外
颜色过渡卡顿或闪烁？优先用hsl()而非hex/rgb
浏览器对hsl()的插值更线性，尤其在跨色相（比如红→蓝）时，rgb()容易经过灰阶导致视觉“脏”，而hsl()保持饱和度与亮度稳定，过渡更顺滑。
- 示例对比：
transition: background-color 0.4s;搭配hsl(0, 100%, 60%) → hsl(240, 100%, 60%)比#f00 → #00f更连贯 - 注意：IE不支持
hsl()（但IE已淘汰），现代项目可放心用 - 工具建议：用
color-mix(in srgb, ...)（新标准）或PostCSS插件自动转hsl，但别强求——多数场景rgb()也够用
transition-delay和cubic-bezier怎么配才自然？
transition-delay常被误用于“等一秒再动”，其实它更适合微调节奏；真正影响自然感的是cubic-bezier()曲线。默认的ease（即cubic-bezier(0.25, 0.1, 0.25, 1)）有轻微加速-减速，适合大多数UI反馈。
立即学习“前端免费学习笔记（深入）”；
- 按钮悬停：用
cubic-bezier(0.4, 0, 0.2, 1)（更柔和的缓入缓出） - 菜单展开：可加
transition-delay: 0.05s配合background-color过渡，让文字颜色先变、背景稍后跟上，模拟“分层响应” - 避坑：不要对同一元素多个颜色属性（如
color和background-color）设不同duration或delay，容易错位
最易被忽略的一点：过渡效果依赖于**重绘触发时机**。如果颜色变化由JS批量修改（比如一次改class又改style），浏览器可能合并重排，导致过渡丢失——这时候得用getComputedStyle(el).color强制读取，或加setTimeout(() => {}, 0)分帧。不过，纯CSS hover或class切换基本不用操心这个。
