safari动画卡死主因是合成层未触发、渲染时机不当及非合成属性导致降级，需用translate3d、避免overflow:hidden、仅动画transform/opacity、设animation-fill-mode:forwards并测试prefers-reduced-motion。
为什么加 transform: translateZ(0) 在 Safari 里有时没用
这不是玄学，是 WebKit 渲染管线的合成层触发机制变了。Safari（尤其 iOS 16+ 和 macOS Ventura 后）对 translateZ(0) 的识别越来越弱，它可能被优化掉、被父级 overflow: hidden 截断，或与 will-change 冲突导致降级。你看到动画“卡死”，大概率不是没加速，而是图层没真正合成出来。
验证方式很简单：在 Safari 开发者工具中打开「Rendering」→ 勾选 Show Compositing Borders。如果动画元素没出现橙色边框，说明它压根没进合成层 —— 此时加 translateZ(0) 就是白加。
- 优先改用
transform: translate3d(0, 0, 0)，比translateZ(0)更可靠，WebKit 对它的提升更积极 - 确保父容器没有
overflow: hidden或clip-path，这些会阻止子元素升层 - 避免和
will-change: transform同时使用，Safari 可能因策略冲突放弃合成
Safari 动画卡死的真正常见原因：动画刚插入就执行
你写好了 @keyframes，也加了 animation，但 Safari 下第一次打开页面，动画不动、跳帧、或直接卡住 —— 这往往不是属性问题，而是渲染时机竞争。Safari 的样式计算和图层提交比 Chrome 更严格，如果元素刚 appendChild 或刚从 display: none 切换出来，它可能合并重排，跳过首帧。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 不要依赖
animation-delay: 0s，它不保证下一帧开始；改用animation-play-state: paused+ JS 中显式设为running - 如果用 class 控制动画，添加 class 后立刻读一次
getComputedStyle(el).transform，强制触发重排，再让动画启动 - 避免在
DOMContentLoaded回调里立即操作动画元素；改用requestAnimationFrame包一层，确保在样式已计算后执行
哪些 CSS 属性会让 Safari 动画直接掉帧甚至禁用
Safari 对非合成属性（non-composited properties）极其敏感。它不像 Chrome 那样尝试兜底加速，一旦检测到 left、top、width、height、background-color 或 box-shadow 在动画中变化，会立刻退回到主线程渲染，CPU 占用飙升，iOS 上极易卡死或跳过关键帧。
- 必须只对
transform（含translateX/scale/rotate）和opacity做@keyframes动画 -
@keyframes里别混用0%和0（单位缺失），Safari 解析更严格，可能整个帧块失效 - 慎用 CSS 变量驱动动画值，Safari 对
var(--x)在@keyframes中的更新响应滞后，容易卡在初始态
动画结束后 Safari 突然回弹，不是 bug 是 fill-mode 缺失
你看到元素动完一下又“啪”地弹回原位，不是 Safari 抽风，而是 animation-fill-mode 没设。Safari 默认是 none，动画一结束就恢复初始样式 —— 特别是当初始态是 transform: none，而动画终点是 translateX(100px) 时，回弹非常明显。
- 要保持终态，必须显式写
animation-fill-mode: forwards - 如果用了 JS 控制动画启停，
forwards在 Safari 中可能不生效（尤其配合animation-play-state时），稳妥做法是在animationend事件里手动加终态 class - 别依赖
transition替代animation来“模拟”终态，Safari 对 transition 的 fill 行为更不可控
最常被忽略的点：Safari 会严格响应 prefers-reduced-motion，哪怕你没写媒体查询，只要系统开启了“减少动态效果”，它就可能直接跳过整个 @keyframes 块。上线前务必在 iOS 设置里打开这个开关实测一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
