html怎么打开动态效果_CSS动画在浏览器打开时不显示的修复【教程】_技术教程

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