CSS动画会覆盖过渡效果，因animation优先级高于transition；transition仅响应外部触发的属性值变化，而@keyframes按时间轴强制接管属性控制权。
当 CSS 的 transition 和 @keyframes 动画同时作用于同一元素的同一属性时，动画会覆盖过渡效果——这是由 CSS 动画的优先级更高决定的。关键不是“避免冲突”，而是理解两者的职责边界，并主动控制它们的生效时机。
transition 只响应属性值的“变化过程”
transition 不是主动播放的动画，它只在元素的某个 CSS 属性**被外部触发改变时**（比如 hover、class 切换、JS 修改 style），才平滑地补间新旧值之间的中间状态。它没有时间轴、不能循环、也不支持多关键帧。
- 仅对可过渡的属性生效（如
opacity、transform、color等） - 必须有明确的“起始值”和“目标值”，否则无从过渡
- 若 JS 直接设置
element.style.transform = 'translateX(100px)'，且此前无 inline transform 值，transition 可能不触发（因无“旧值”）
@keyframes 是独立、可控的“时间线动画”
@keyframes 定义的是一个命名动画片段，需配合 animation 属性显式启用。它按时间轴逐帧执行，完全不依赖属性是否被外部修改，且会强制接管对应属性的控制权。
- 一旦
animation运行，它对声明的属性（如transform）拥有最高控制权 - 即使同时写了
transition: transform 0.3s，只要animation正在播放，transition 就不会介入该属性 - 动画结束后，默认行为是“保持最后一帧”（
animation-fill-mode: forwards），此时 transition 仍不会自动恢复——除非你手动改回其他值
让两者协同而非打架的实用策略
真正的问题往往出在“想用 transition 做交互反馈，又用 animation 做初始动效”，结果互相干扰。解法在于分离控制权：
立即学习“前端免费学习笔记（深入）”；
-
用 class 控制阶段：初始加载用
animate-in类启动 keyframes；交互时移除该类，再添加hover-active类触发 transition。确保同一时刻只有一个类生效 -
动画结束时重置 transition 可控性：在
animationend事件中，用 JS 移除animation相关声明，或清空内联style.animation，让 transition 重新获得属性控制权 -
避免同属性混用：例如用
@keyframes控制opacity和transform，而把color或box-shadow留给 transition 响应 hover——物理上分离关注点
检查与调试的小技巧
浏览器开发者工具里，Elements 面板的 Styles 标签页会直观显示哪些样式被“取消线”划掉（即被更高优先级规则覆盖）。重点关注：
- transition 属性是否被 animation 声明压制（看
transform等属性旁是否有灰色禁用图标） - 动画是否设置了
animation-fill-mode: forwards，导致结束态“锁死”了属性值，阻碍后续 transition 触发 - 是否误将 transition 写在了动画的 keyframes 内部（无效！transition 必须写在选择器规则中）
