transition必须写在颜色要变化的元素本身，默认状态中声明，如.btn{color:blue;transition:color 0.3s ease;}，hover时仅改变颜色值；避免混用颜色格式、优先级冲突及all简写。
transition 该写在哪个元素上？
必须写在颜色要变化的元素本身，不是父容器，也不是伪元素。很多人把 transition 加在 :hover 规则里，结果动画只触发一次或完全不生效——这是错的。
正确做法是：在默认状态（非 hover）的元素样式中声明 transition，让浏览器提前知道“接下来这个属性要过渡”。
-
transition要写在基础选择器里，比如.btn { color: blue; transition: color 0.3s ease; } - 变化靠状态触发，比如
.btn:hover { color: red; }，此时浏览器才会执行过渡 - 如果只在
:hover里写transition，鼠标移入时它才被解析，移出时没有过渡回退
color 过渡失效的常见原因
最常踩的坑是用了不支持过渡的颜色值类型，或者颜色没真正“变”。color 属性本身支持过渡，但前提是起始值和结束值都是可插值的颜色格式。
- 用
rgba()或hsl()比hex更稳，比如#000→#fff有时会跳变，而hsl(0, 0%, 0%)→hsl(0, 0%, 100%)过渡更线性 - 避免混用不同格式：
color: #333;→color: rgb(255, 0, 0);可能中断过渡（浏览器不一定能平滑插值） - 检查是否被其他规则覆盖：比如 CSS 优先级更高的
!important或内联样式会绕过transition
transition-delay 和 timing-function 怎么配才自然？
延迟和缓动函数不是调参游戏，得看交互意图。按钮悬停换色通常不需要 delay；但图标+文字组合切换时，delay 可以制造节奏感。
立即学习“前端免费学习笔记（深入）”；
- 单色切换推荐
ease-in-out或cubic-bezier(0.4, 0, 0.2, 1)（标准 material easing） - 想强调响应速度，用
ease-out；想强调进入柔和感，用ease-in - 慎用
transition-delay：大于 0.05s 就容易让人感觉“卡了一下”，尤其在按钮上 - 如果同时过渡多个属性（比如
color和background-color），建议统一写成transition: color 0.2s, background-color 0.2s;，别偷懒写all 0.2s——会意外过渡到不想动的属性
兼容性与性能要注意什么？
transition 在现代浏览器里很稳，但老版本 Safari（color 过渡有渲染抖动，iOS WebView 里也偶发失效。性能上，color 是合成层友好属性，基本不触发重排，放心用。
- 需要兼容 iOS 12/Safari 12？加一行
-webkit-transition: color 0.3s ease; - 别在大量元素上批量开
transition（比如表格每行文字），滚动时可能掉帧——这时改用will-change: color;反而更糟，除非真有性能问题 - 深色模式切换时，用
@media (prefers-color-scheme: dark)配合transition是可行的，但首次加载不会触发过渡（媒体查询变化不算“属性变更”）
all。 
