Safari 15–16不支持Web Animations API，应避免用if判断；可行方案为CSS class+transition或requestAnimationFrame手动插值；复杂动画推荐anime.js等适配库；优先使用transform而非top/left以避免强制布局。
旧版 Safari（transform 的 translateZ(0) 触发硬件加速
很多开发者习惯加 transform: translateZ(0) 或 translate3d(0,0,0) 强制开启 GPU 加速，但在 Safari 9–12 中，这反而可能引发闪烁、重绘异常，甚至导致 position: fixed 元素错位。
替代方案更稳妥：
- 优先用
will-change: transform（Safari 9.1+ 支持），但只在动画触发前动态添加，结束后移除，避免持续开销 - 对纯位移动画，直接用
transform: translateX(...)即可，旧 Safari 对 2D transform 的优化已足够 - 避免在
:hover或@media中写translateZ(0)—— Safari 会错误地复用图层，造成视觉残留
requestAnimationFrame 在 Safari 6–9 中的节流与时间戳偏差
Safari 6–9 的 requestAnimationFrame 实现存在两个关键问题：帧率被系统节流（尤其标签页非激活时），且回调参数 timestamp 不是 DOMHighResTimeStamp，而是近似 Date.now() 值，精度低、易跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖传入的
timestamp计算 delta —— 改用performance.now()（Safari 8+ 支持）自行采样 - 对关键动画（如拖拽跟随），加兜底逻辑：
if (lastTime === timestamp) timestamp = performance.now() - Safari 6–7 完全不支持
requestAnimationFrame，必须用setTimeout(fn, 16)+ 自测帧率降级（可通过self.__rafFps = 60手动标记环境）
CSS 动画中 @keyframes 的私有前缀早已失效，但 animation 复合属性仍需谨慎
Safari 5.1–6.1 要求 -webkit- 前缀，但 Safari 7+ 已完全支持无前缀 @keyframes 和 animation。真正容易出错的是复合属性写法：
❌ 错误写法（Safari 9–10 解析失败）：animation: slide 0.3s ease-in-out 0s 1 forwards;
✅ 正确写法（拆成独立属性，兼容性更稳）：
animation-name: slide;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: forwards;
原因：旧 Safari 对复合 animation 中省略值（如 0s 写成 0）或顺序错乱极其敏感，且不报错，只是静默忽略整条声明。
Web Animations API（element.animate()）在 Safari 中根本不可用
Safari 直到 17.4 才开始实验性支持 element.animate()（需开启 Experimental Features > Web Animations API），而绝大多数线上用户仍在使用 Safari 15–16，这些版本完全无视该 API。
不要试图用 if ('animate' in Element.prototype) 判断 —— 它在 Safari 中恒为 false，且无 polyfill 能真正还原其 timing 控制能力。
可行路径只有两条：
- 用 CSS class 切换 +
transition驱动简单动画（支持到 Safari 4） - 用
requestAnimationFrame+ 手动插值更新style.transform（需自己处理 easing、cancel、pause） - 若必须复杂控制，引入
anime.js或popmotion等库 —— 它们内部已对 Safari 的 timing 函数和 transform 行为做了专项适配
最常被忽略的一点：Safari 对 transition 的 transform 属性变更响应极快，但对 top/left 这类 layout 属性的过渡，会强制触发布局计算，卡顿明显 —— 动画属性选型比写法更重要。
