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 直接跳过）。
