@keyframes 中的属性能被内联样式、!important 声明及高特异性选择器覆盖，但不参与优先级计算；动画生效时的帧样式与其他CSS规则按标准层叠规则决定最终值。
动画关键帧里的样式不会被普通 CSS 类覆盖，但会被内联样式、!important 声明或更高优先级的选择器压制——关键不是“谁写在后面”，而是“谁更具体、谁更靠近元素”。
@keyframes 中的属性能被哪些样式覆盖？
@keyframes 定义的是动画过程中的“目标状态”，它本身不参与 CSS 优先级计算；真正起作用的是 animation 触发后浏览器计算出的每一帧样式。这些样式会和当前元素上其他 CSS 规则一起参与层叠（cascade），按标准优先级规则决定最终渲染值。
-
!important声明在普通样式中会压过 @keyframes 里同名属性（比如opacity: 0 !important能阻止@keyframes里opacity: 1生效） - 内联样式（
style="transform: scale(2)"）优先级高于 @keyframes 中任意百分比帧的transform - 高特异性选择器（如
#header .box.active）定义的background-color可能覆盖@keyframes fade-in里同一属性 - @keyframes 内部不同帧之间不比优先级——0% 和 50% 的
left值由时间轴决定，不是靠选择器权重
为什么动画中途突然跳变或失效？
常见原因是关键属性被外部样式“锁死”。比如你在 class 里写了 transform: rotate(45deg)，而 @keyframes 试图用 transform: translateX(100px) 动画——这两个声明会合并（rotate 不会被清除），导致位移失效或视觉错乱。
- 避免在动画元素上直接设置会参与动画的属性（如
transform、opacity、color），除非你明确想做“基底偏移” - 如果必须预设初始状态，用
animation-fill-mode: forwards+@keyframes显式定义 0%，而不是靠外部 class - 检查 computed style：打开 DevTools → Elements → Styles 面板，看“动画生效时”的实际值是否被其他规则覆盖
如何安全地复用和切换 @keyframes 动画？
不要指望改 animation-name 就能“清空上一个动画效果”。浏览器会保留上一次动画结束帧的样式（尤其当用了 forwards），新动画可能从错误起点开始。
立即学习“前端免费学习笔记（深入）”；
- 切换前先临时清空：
el.style.animationName = 'none'，再强制重排（如读el.offsetHeight），最后赋新值 - 关键属性（如
transform）建议在触发动画的 class 里写明初始值：.animate-slide { transform: translateX(0); }，而不是依赖 0% 帧 - 多个动画共用同一属性时，确保它们的 keyframes 不冲突——比如一个动
top，另一个动transform，比两个都动left更安全
最常被忽略的一点：@keyframes 里写的只是“变化目标”，它不接管元素的静态样式。动画是否如预期运行，取决于你有没有让那些属性“留出被动画的空间”。
