safari动画失效的根本原因是-webkit-transition与transition声明顺序错误或不一致。必须先写-webkit-transition再写transition，属性值完全相同；所有过渡属性需在基础样式中显式定义初始值；为触发gpu加速，须添加transform: translatez(0)和backface-visibility: hidden。
根本原因不是“Safari不支持transition”，而是它只认-webkit-transition，且必须和标准transition共存、顺序不能错——漏写前缀、顺序颠倒、属性值不一致，都会导致Safari静默忽略整条声明。
为什么加了-webkit-transition还是没动画？
WebKit内核浏览器（Safari、iOS WebView、旧版Chrome）只解析-webkit-transition，但现代Firefox/Edge只认标准transition。所以不能只写前缀版，也不能把标准版放前面。
- 必须严格按顺序写：
-webkit-transition: opacity 0.3s ease;→transition: opacity 0.3s ease; - 两行的属性名、时长、timing-function必须完全一致，比如不能一个写
all一个写opacity -
-moz-transition可选（仅Firefox ≤15），-o-transition和-ms-transition基本可省略
transition写对了，但Safari里第一次动就跳变
过渡需要明确起点，而Safari对初始值缺失更敏感。比如left没在基础样式里定义，值为auto，那从auto → 100px就无法插值，直接瞬移。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 所有参与过渡的属性，必须在常态选择器中显式声明初始值，例如
.box { left: 0; transition: left 0.3s; } - 别依赖继承或默认值；用DevTools的Computed面板确认该属性当前值不是
auto或initial - transition必须定义在基础类里，不能只塞在
:hover或JS切换的临时class中
Safari里动画卡顿、闪屏甚至文字抖动
这不是CSS写错了，是WebKit没给元素建稳定的合成图层（compositing layer）。它在帧之间反复销毁重建图层，导致重绘、白边、抖动。
- 必须在动画元素自身上加：
transform: translateZ(0); backface-visibility: hidden;（顺序不能颠倒） - 不能加在父容器上，该属性不继承；也不能搭配
filter或backdrop-filter一起用，否则可能失效 - 如果动画涉及
left/top，得换成transform: translate()，否则强制触发重排，GPU加速也救不了
最容易被忽略的是：真机测试比DevTools准得多。有些闪烁只在iOS Safari首次动画或滚动后出现，且必须进Web Inspector的Layers面板确认目标元素是否真的单独成层——没成层，加什么都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
