Safari动画不运行主因是解析失败且静默忽略，须同时声明标准与-webkit前缀、大小写严格一致、禁用CSS变量、统一用0%/100%、0不带单位、双写animation属性、启用硬件加速并验证开发者工具中属性是否生效。
绝大多数 Safari 动画不运行，不是代码写错了，而是它根本没解析到动画规则——缺前缀、大小写错、用了变量、或关键帧写法不兼容，直接被静默忽略。
为什么 Safari 完全不触发 @keyframes
Safari（尤其是 iOS 15 及更早）对 @keyframes 解析极严格，任意一处违规就整块丢弃，且控制台不报错。
- 必须同时声明
@keyframes spin和@-webkit-keyframes spin，名称大小写必须完全一致（Spin≠spin） - 禁止在
@keyframes内使用var(--color)，iOS Safari 15.6 之前版本直接跳过整个规则块 - 统一用
0%和100%，混用0和0%会导致 Safari 忽略该关键帧 -
0px、0deg必须写成0，带单位的 0 在旧 Safari 中可能失效
animation 属性写了但没效果
写了 animation: fade 0.3s 却不动？Safari 要求前缀和标准属性“双写”，缺一不可。
- 必须紧接一行写：
animation: fade 0.3s;后立即跟-webkit-animation: fade 0.3s; - 不能只靠 Autoprefixer 自动补——某些构建流程（如 Vue scoped style 或 Shadow DOM）会隔离前缀，导致
-webkit-规则未注入到实际渲染层 - 检查元素是否被
display: none或visibility: hidden拦截：Safari 对这类状态下的动画启动更保守，建议改用opacity: 0; pointer-events: none;+animation-fill-mode: none
iOS Safari 动画卡顿或暂停后不恢复
旋转类动画点暂停后还在转、后台切回来直接跳到末帧、滚动中掉帧——本质是硬件加速未真正启用或时间轴未重置。
立即学习“前端免费学习笔记（深入）”；
- 给动画元素加
-webkit-transform: translateZ(0);或transform: translate3d(0, 0, 0);，强制创建合成层 - 父容器需设
-webkit-perspective: 400px;，否则 Safari 可能降级为软件渲染 - 后台恢复时别碰
animation-play-state：iOS Safari 对它的 runtime 修改支持极差；改用 class 切换 +el.offsetHeight强制 reflow +animation-fill-mode: none - 动画时长别低于
0.15s，部分 iOS Webview 会跳过首帧
如何确认 Safari 真正加载并执行了动画
不能只看代码有没有，得进开发者工具验证渲染引擎是否真认了这行动画。
- 打开 Safari 开发者工具（开发 → 在 iPhone 模拟器中启用 Web 检查器）
- 选中目标元素，在 Styles 面板里搜索
animation，确认animation-name、animation-duration等属性无删除线，且值已计算生效 - 切换到 Timelines 面板，点击录制，滚动/交互后看是否有 animation 相关帧生成；若空白，说明规则未命中
- 临时在 CSS 里加一条明显错误（如
xxx: yyy;），如果整条样式块消失，说明前缀或语法问题已让浏览器放弃解析后续内容
最常被忽略的一点：Safari 不会告诉你哪里错了，它只会沉默地跳过。所以每次改完，必须进开发者工具的 Styles 面板逐条确认属性是否“活着”，而不是只信编辑器里的语法高亮。
