用 transition 实现 CSS 颜色动画需在默认状态声明 transition，支持 color、background-color 等属性，推荐 hsl()/rgb() 格式，避免 transparent 与 currentcolor 混合，注意性能优化与无障碍适配。
用 transition 实现 CSS 颜色变化动画，关键在于对颜色属性（如 color、background-color、border-color 等）设置过渡效果，并在状态变化时（比如 hover、class 切换）更新颜色值。
基础写法：hover 触发颜色渐变
最常用场景是鼠标悬停时文字或背景色平滑变化：
注意：必须指定过渡的属性名、持续时间、缓动函数（可选），且颜色值需为浏览器可插值的格式（如 hex、rgb、hsl）。
- 支持过渡的颜色属性包括：
color、background-color、border-color、outline-color、text-decoration-color等 - 避免使用
transparent和currentcolor混合过渡（部分旧浏览器可能不平滑） - 推荐用
hsl()或rgb()写法，比十六进制更利于视觉连贯性（尤其明度/饱和度渐变）
正确声明 transition 的位置
transition 必须写在「默认状态」上（不是 hover 里），否则第一次进入无动画：
立即学习“前端免费学习笔记（深入）”；
.btn {
background-color: #4285f4;
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn:hover {
background-color: #34a853;
color: #fff;
}
✅ 这样写才会触发平滑过渡；❌ 若把 transition 写在 :hover 里，鼠标移入瞬间变色，移出才有动画。
用 class 控制更灵活的颜色切换
适合按钮主题切换、夜间模式、状态高亮等动态场景：
- 给元素添加/移除 class，配合 JS 控制逻辑
- transition 仍写在基础 class 中，确保双向都有动画
- 例如：
.status { transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1); }+.status.warning { color: #ff6b35; }
进阶技巧：避免闪烁与提升性能
颜色动画虽轻量，但要注意几个细节：
- 不要对
opacity和颜色同时过渡（除非有意图），易造成视觉混淆 - 避免在大量元素上同时触发颜色 transition（如列表项 hover），可加
will-change: background-color提示渲染优化（慎用） - 深色/浅色对比强烈时，建议搭配
prefers-color-scheme媒体查询做自动适配
