safari动画不生效最常见原因是大小写敏感及缺少-webkit前缀；firefox卡顿因GPU触发严格，需用translate3d；display:none导致过渡丢失，应改用visibility+opacity；ios微信动画静止因内核滞后，需精简关键帧并禁用backface-visibility。
animation 和 @keyframes 在 Safari 里不生效
最常见的情况是 Safari（尤其是 iOS 15 及更早版本）对 @keyframes 名称大小写敏感，或忽略未加前缀的 animation 属性。Safari 旧版要求显式声明 -webkit-animation，且 @keyframes 必须带 -webkit- 前缀才能被识别。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终同时写两套规则：
@keyframes fadeIn和@-webkit-keyframes fadeIn，内容完全一致 - 动画属性必须成对出现：
animation: fadeIn 0.3s;+-webkit-animation: fadeIn 0.3s; - 避免在
@keyframes中使用 css 变量（var(--color)），Safari 旧版不支持 - 如果用 webpack 或 postcss，确认
autoprefixer配置包含safari >= 12，否则默认可能不输出-webkit-
transform 动画在 Firefox 中卡顿或跳变
Firefox 对 transform 的硬件加速触发条件比 chrome 更严格。单纯写 transform: translateX(10px) 可能不启用 GPU，导致重排或掉帧；而 transform: translateZ(0) 或 will-change: transform 在 Firefox 中有时反而引发渲染异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform: translate3d(0, 0, 0)替代translateZ(0)，Firefox 对前者兼容性更稳 - 避免在动画中动态修改
top/left等触发布局的属性，只用transform和opacity - 慎用
will-change：仅在动画开始前 1 帧设置，结束后立即设为auto，否则 Firefox 会持续占用纹理内存 - 测试时打开 Firefox 的“FPS counter”（
about:config→layers.acceleration.draw-fps= true），确认是否真启用 GPU
transition 从 display: none 切换时动画丢失
display: none 会立即将元素从渲染树移除，任何 transition 都无法触发。这不是浏览器差异，而是规范行为，但各浏览器对“何时触发 transition”的细微时机判断不同（比如 Chrome 可能延迟一帧，Firefox 直接跳过）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
visibility: hidden+opacity: 0替代display: none，再配合transition: opacity 0.2s, visibility 0.2s - 若必须用
display，用 js 控制：先设display: block，offsetWidth强制重排，再加动画 class - 避免在 vue/react 中直接绑定
display的响应式值，改用v-show或className切换
动画在 iOS 微信内置浏览器中完全静止
iOS 微信用的是 UIwebview（iOS 12.2+ 后部分升级为 WKWebView），但其内核版本长期滞后，常禁用或阉割 requestAnimationFrame、transform 硬件加速，甚至忽略 @keyframes 中的百分比关键帧（如只认 0% 和 100%，忽略 50%）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关键帧只保留
0%和100%，中间状态用 JS 补帧（如animate()API 或setInterval） - 禁用
backface-visibility: hidden—— iOS 微信某些版本会因此清空整个图层 - 避免使用
animation-fill-mode: forwards，改用 JS 在动画结束时手动设置终态样式 - 上线前务必真机测试：iOS 微信 ≠ Safari，也不等于系统 WebView 模拟器
实际项目里最麻烦的不是写前缀，而是不同浏览器对「动画是否该触发重绘」的判定逻辑不一致。比如一个 opacity 动画，在 Chrome 里平滑，在 Firefox 里闪一下，在 iOS 微信里干脆不动——这时候得一层层查 devtools 的 Rendering 面板，看是不是被强制退到了 CPU 渲染。