当transition和animation同时控制同一CSS属性时会冲突导致卡顿或失效，应明确分工：transition负责用户触发的即时交互反馈，animation负责自动运行的周期性变化，避免同一属性两者共存。
当 CSS 中同时使用 transition 和 animation 控制同一属性（比如 color）时，动画可能卡顿、跳变或完全失效——根本原因是两者对同一属性的控制权发生竞争。解决关键不是“禁用一个”，而是明确分工：让 transition 管交互响应，animation 管周期性/自主变化。
区分职责：哪些颜色变化归 transition，哪些归 animation
transition 适合：用户触发的即时反馈，比如悬停变色、焦点高亮、点击态切换。它依赖状态变化（:hover, :focus, class 切换），且只在状态切换瞬间生效一次。
- 按钮悬停时从蓝色渐变到深蓝 → 用
transition: color 0.3s ease; - 输入框获得焦点时边框和文字同时变色 → 同样用
transition，保持响应一致 - 避免给这类交互再叠加同属性的
animation，否则 hover 进入时动画可能被中断或重置
用 animation 处理非交互驱动的颜色节奏变化
animation 适合：无需用户操作、自动运行的颜色循环（如加载指示器、状态闪烁、视觉强调）。它独立于 DOM 状态，靠 @keyframes 定义完整过程。
- 一个“正在处理”标签缓慢呼吸式变色 → 写
@keyframes pulseColor { 0% { color: #666; } 50% { color: #007bff; } 100% { color: #666; } }，再用animation: pulseColor 2s infinite; - 此时不要给该元素的
color设transition，否则动画帧可能被过渡插值干扰 - 若需在动画运行中响应 hover，可临时用
animation-play-state: paused;暂停，而非直接改 color 值
冲突时的优先级与覆盖策略
CSS 动画（animation）的内联样式或关键帧声明，默认优先级高于 transition 触发的中间状态。但实际表现取决于具体写法和时机。
立即学习“前端免费学习笔记（深入）”；
- 如果同时写了
transition: color 0.3s;和animation: fadeColor 1s;，浏览器会尝试同时执行——结果常是颜色抖动或过渡被跳过 - 稳妥做法：对同一属性，只保留一种机制。例如用
animation实现 hover 变色，就删掉相关transition - 必要共存时，用
!important强制过渡（不推荐）；更优解是拆分属性，比如用border-color做过渡，color做动画
调试技巧：快速定位冲突源
在浏览器开发者工具中检查元素的“Computed”面板，展开 color 属性，看当前生效值来自哪条规则；再点开“Animations”或“Transitions”侧栏，确认是否有多个动画/过渡正在作用于该属性。
- 看到 “Transitioning” 和 “Animating” 同时标黄？说明冲突已发生
- 临时禁用其中一项（勾选/取消勾选样式规则），观察行为是否恢复正常
- 用
transition: none;或animation: none;快速隔离测试
