17370845950

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 必须写在选择器规则中）