transition必须写在基础选择器中，不能仅写在:hover或.active等状态里；背景色过渡需用background-color而非background简写；颜色过渡应统一使用hsl()格式以避免发灰。
能，但必须写对位置、选对属性、用对颜色格式，否则就是跳变不是过渡。
transition 必须写在基础选择器里，不能只写在 :hover 或 .active 中
浏览器只在状态变化前检查初始元素是否声明了 transition，而不是看新样式有没有写。写在目标状态里，进有动画、出直接跳回。
- ✅ 正确：
.btn { background-color: #007bff; transition: background-color 0.3s ease; }+.btn:hover { background-color: #0056b3; } - ❌ 错误：
.btn { background-color: #007bff; }+.btn:hover { background-color: #0056b3; transition: background-color 0.3s ease; } - JS 控制的 class（如
.card.active）同理：transition必须写在.card基础规则中，不能只写在.active
background-color 过渡失效？先查是不是用了 background 简写
background 是复合属性，一旦写成 background: url(...) center / cover，它会重置整个背景层，覆盖掉单独声明的 background-color 和它的 transition。
- 只动背景色，就只声明
background-color，并配transition: background-color 0.4s - 避免
background: none作为起点——浏览器认为该属性未参与渲染，过渡被忽略；改用background-color: transparent - 从透明到实色，在旧版 Safari 可能不触发，换成
rgba(0,0,0,0)→rgba(0,0,0,1)更稳妥
color 或 border-color 过渡失败？检查颜色值类型和边框定义
color 和 border-color 能过渡，但前提是起始/结束值可插值，且承载属性已显式声明。
立即学习“前端免费学习笔记（深入）”；
-
inherit、currentcolor（未被父级明确定义时）、transparent（部分 Safari 版本）可能导致跳变 -
border-color必须配合border-width和border-style（如solid）一起声明，否则不参与渲染，transition无效 - 别用
border: none当起点；改用border: 2px solid transparent - 伪元素（
::before/::after）里的文字颜色不会继承父级transition，必须单独加
跨色相过渡发灰？换 hsl()，别混用 rgb 和 hsl
从 #f00 直接到 hsl(240, 100%, 50%) 浏览器无法插值，直接跳变；而 rgb() 或十六进制在红→蓝切换时中间必经灰阶，视觉“脏”。
- 统一用
hsl()：起始hsl(0, 100%, 60%)→ 结束hsl(240, 100%, 60%)，饱和度与亮度稳定，路径更顺滑 - CSS 变量控制颜色时，确保
--text-color: hsl(0, 100%, 60%)这类值始终是合法颜色字符串，不能是unset或initial - IE 已淘汰，现代项目可放心用
hsl()，无需降级 fallback
最容易被忽略的其实是伪元素和继承链——::before 里的 color、子元素的 color: inherit，它们压根不认父级写的 transition，得各自单独加声明。
