动画未触发主因是浏览器未判定需重绘或Safari兼容问题：检查animation-name拼写、元素是否渲染、animation-fill-mode设置，避免keyframes中混用0/0%及CSS变量，Safari需加-webkit前缀。

动画没触发：animation 声明写了但页面一打开就静止

多数情况不是 CSS 写错了，而是浏览器压根没“看到”动画该开始——animation 默认只在元素插入 DOM 后、且满足触发条件时才启动。如果元素初始状态和 @keyframes 的 0% 完全一致，又没手动触发重排或重绘，动画就卡在起点不动。

• 检查是否漏了 animation-name 或拼写错误（比如写成 animaton-name）
• 确认元素已渲染（display: none 或 visibility: hidden 会阻止动画启动）
• 避免用 opacity: 0 + animation 淡入却没设 animation-fill-mode: forwards，导致动画结束立刻回退到初始值

animation-delay 设为 0ms 仍不播放？可能是渲染时机问题

即使写了 animation-delay: 0s，若样式是在 JS 动态插入、或元素刚 appendChild 就立即加 class，浏览器可能合并重排，跳过动画帧。这不是 bug，是渲染优化行为。

• 强制触发重排：在添加动画 class 后，读取一次 offsetHeight 或 getComputedStyle(el).opacity
• 改用 requestAnimationFrame 延迟到下一帧再加 class
• 更稳妥：初始用 animation-play-state: paused，JS 中先加 class，再用 el.style.animationPlayState = 'running'

Chrome/Firefox 正常，Safari 不动？查 @keyframes 兼容写法

Safari（尤其 iOS 15 及更早）对 @keyframes 的解析更严格：不支持在 keyframe 中使用自定义属性（var(--x)），也不接受带单位的 0（如 0px、0deg 必须写成 0）。

@keyframes slide-in {
  0 { transform: translateX(-100px); } /* ❌ Safari 可能忽略 */
  0 { transform: translateX(-100px); opacity: 0; } /* ✅ 但注意：Safari 要求 0% 和 0 写法统一 */
  100% { transform: translateX(0); opacity: 1; }
}

• 统一用 0% 和 100%，别混用 0 和 0%
• 避免在 @keyframes 中调用 calc() 或 CSS 变量（旧 Safari 不支持）
• 必要时加 WebKit 前缀：@-webkit-keyframes + -webkit-animation

动画只播一次就不动了：animation-iteration-count 默认值陷阱

animation-iteration-count 默认是 1，不是 infinite。很多人以为加了 animation 就会循环，结果只闪一下。

• 要循环必须显式写 animation-iteration-count: infinite
• 注意：若用了 animation-fill-mode: forwards 且 iteration-count: 1，动画结束后元素会停在最后一帧；但若没设 forwards，它会瞬间回退到初始状态，看起来像“没动”
• 调试技巧：临时加 animation-duration: 3s + animation-iteration-count: 10，肉眼确认是否真在播

动画真正卡住的地方，往往不在 keyframes 里，而在元素是否被浏览器判定为“需要重绘”、CSS 是否被正确应用、以及 Safari 对语法的苛刻要求。动手前先开开发者工具，选中元素，看 Styles 面板里 animation 属性有没有被划掉，再点 Animations 标签页看是否列出了正在运行的动画。