应将transition声明放在常态选择器中而非:hover里，确保进出动画一致；统一色彩模型（如rgba）、避免all过渡、合理设置时长与缓动函数，并注意边框属性的可插值性。
transition写在:hover里导致退出时突变
很多人把transition只加在:hover规则中，比如a:hover { color: #007bff; transition: color 0.3s; }。这会让鼠标移入时有动画，但移出时直接跳回原始色——视觉上就是“闪一下”。浏览器根本没机会对退出做插值。
必须把transition声明放在常态选择器里：a { color: #333; transition: color 0.3s ease; }。这样进出都走同一段过渡逻辑，动画链才完整。
- 别用
transition: all 0.3s——哪怕只是border-color悄悄变了，也会被强行插值，引发意外抖动 - 时间选0.2s–0.4s最自然；太短像没动，太长让人等
- 缓动函数优先
cubic-bezier(0.4, 0.1, 0.3, 1)，比默认ease更柔和，尤其对明度变化敏感的场景
色彩模型混用导致插值中断
浏览器只能在同一种色彩空间里线性计算颜色过渡。如果你写color: #ff0000; → color: hsl(0, 100%, 50%);，或者rgb(255, 0, 0) → rgba(0, 0, 255, 1)，它不会尝试转换，而是直接跳到终点色。
DevTools里能看到computed值已更新，但动画就是不跑——这就是插值链断了。
- 统一用
rgb()或rgba()：通道明确，兼容性好，连IE9都认 - 要透明度就用
rgba()，别靠opacity压整个元素——子内容会跟着变淡 - 避免
white、transparent这类关键字和hex混用；#fff和white虽等价，但解析路径不同，可能破坏过渡连续性
深色模式切换时首帧闪屏
仅靠@media (prefers-color-scheme: dark)定义变量，首次渲染必闪。因为媒体查询匹配发生在样式表解析后期，浏览器已经用浅色完成首帧绘制，再切深色就是“啪”一下。
必须在最上方内联JS，同步读取window.matchMedia('(prefers-color-scheme: dark)')并立刻设置document.documentElement.setAttribute('data-theme', 'dark')。
-
transition必须写在基础选择器（如body、:root）里，不能只塞进.dark-theme类中 - 每个
var(--color)都要带fallback：color: var(--text-color, #333);，否则变量未就位时降级成inherit或transparent，颜色直接崩 - 所有颜色规则要同时覆盖两套：
[data-theme="dark"]+@media (prefers-color-scheme: dark)，缺一不可
border-color过渡失效却看不出原因
transition: border-color 0.3s;写了却没反应？大概率是边框本身没参与渲染。CSS要求border-width和border-style同时存在，浏览器才认为“这是一条真边框”，才能对border-color插值。
常见陷阱：border: none; → border-color: #007bff;，或者起始态用inherit、initial——这些值不可插值，浏览器直接跳变。
- 起始态写
border: 1px solid transparent;，目标态改border-color: #007bff; - 从
transparent过渡到实色时，Safari容易闪：改用rgba(0,0,0,0)→rgba(0,0,0,0.8)，绕过解析歧义 - 多个边框属性共用
transition时，timing function会隐式复制——想差异化控制，每个属性都得配齐函数，比如transition: border-color 0.3s cubic-bezier(0.4, 0.1, 0.3, 1), border-width 0.2s linear;
transition，而在判断「这个颜色变化是否真的需要动」。很多闪烁，本质是给静态文本、页脚链接、图标边框加了无意义的颜色过渡——它们不提供交互反馈，只增加渲染负担和出错概率。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
