transition改background-color或color最稳，但需显式声明初始色、避免transition:all、js中勿重置为空、css变量需@property三要素齐全且单位正确。
直接用 transition 改 background-color 或 color 是最稳、最省事的方案，浏览器原生支持插值，不用 JS、不卡顿、IE10 都能跑。
为什么 transition: background-color 有时没反应
写了 transition: background-color 0.3s 却还是跳变，大概率是这几个地方没对：
- 初始状态没显式声明
background-color，比如body默认无背景色，从undefined到#fff无法过渡——务必写background-color: transparent或background-color: #fff兜底 - 用了
transition: all 0.3s，结果box-shadow或transform被拖进来，造成意外闪烁 - 在 JS 里用
element.style.backgroundColor = "red"后立刻又设回空字符串或""，触发了浏览器的“样式重置优化”，跳过过渡 - CSS 变量更新后，
background-color: var(--bg-main)所在的选择器权重不够，被其他规则覆盖，导致过渡对象实际没变
用 CSS @property 实现颜色变量过渡要满足三要素
@property 不是写了就能动画，必须同时满足三项才生效：
-
syntax: "<color>"</color>：尖括号是字面量，必须小写、带英文引号，不能写成"color"或<color></color> -
inherits: false：颜色变量极少需要继承，设为true会导致动画在子元素中意外中断 -
initial-value必须是合法颜色值（支持#rgb、rgb()、hsl()、var(--x)），但不能是currentcolor
验证是否注册成功：DevTools → Elements → Styles 中看该属性是否带「动画图标」；或运行 CSS.supports('property', '--my-color') 返回 true。
hover 变色时别只写 transition: all
常见错误是给按钮加 transition: all 0.3s ease，结果悬停时文字抖动、边框虚化、阴影抽搐。真正需要过渡的只有 background-color 和 color：
- 正确写法：
transition: background-color 0.3s ease, color 0.3s ease - 如果还要动边框，明确写
border-color，别依赖all - 移动端慎用
transform过渡（如scale），部分安卓 WebView 会触发重绘卡顿
最容易被忽略的是：HSL 模式里 s 和 l 后面必须跟 % 单位（如 70%），漏掉就失效；而 h 是角度值，不能带 % —— 这个细节在 Safari 和 Firefox 中表现不一致，Chrome 会静默失败，页面看起来“没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
