transition 必须写在默认状态而非 hover 中才能实现双向平滑过渡；颜色值需统一格式（如全用十六进制或 hsl）以确保插值生效；它适用于交互状态变化，而多段动画需用 @keyframes。
直接用 transition 就能实现颜色缓慢过渡，不需要写 @keyframes 或 JavaScript；关键不是“怎么动”，而是“什么时候动”和“怎么写才不失效”。
transition 必须写在默认状态里，不是 hover 里
很多人把 transition 放在 :hover 规则中，结果鼠标移入有动画、移出却“啪”一下跳回原色——因为移出时没有过渡定义。
-
transition要写在基础选择器里，比如.btn { color: #333; transition: color 0.4s ease-in-out; } -
:hover只负责改值：.btn:hover { color: #007bff; } - 浏览器靠初始声明提前注册过渡行为，否则移出时无法反向插值
color 和 background-color 都支持过渡，但格式必须一致
如果起始色是 rgb(255, 0, 0)，结束色是 #ff0000，部分浏览器会 fallback 到瞬间切换——因为两种格式底层插值路径不同。
- 统一用十六进制（
#rrggbb或#rgb）最稳妥 - HSL 格式也支持插值，且更利于控制色相渐变，例如
hsl(0, 100%, 50%) → hsl(120, 100%, 50%) - 避免混用
transparent和rgba(0,0,0,0)，它们视觉相同但计算路径不同
animation 和 transition 的核心区别：触发方式不同
如果你需要自动播放、多段变色、循环或非交互触发，就得用 @keyframes + animation；但只要响应 hover/click/focus 这类状态变化，transition 更轻量、更可控。
-
transition是“状态差值驱动”：只在两个已知状态间补帧 -
animation是“时间轴驱动”：可定义 0%→33%→66%→100% 多个中间态，适合背景色循环渐变 - 性能上，
transition对color和background-color不触发重排，但频繁变更仍可能触发重绘；若需更高性能，优先用opacity或transform替代
真正容易被忽略的点是：过渡生效的前提，不是写了 transition，而是目标属性确实发生了**可插值的变化**。比如从 display: none 切到 block，或者从 visibility: hidden 切到 visible，这些都不支持过渡——颜色过渡只对数值型、颜色型属性有效，且起止值都得是浏览器能线性插值的合法颜色值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
