动画未触发主因是浏览器未判定需重绘或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 标签页看是否列出了正在运行的动画。
