使用标准transition属性并合理添加浏览器前缀可提升跨浏览器一致性：先写-webkit-transition，再写transition；避免all值，显式列出过渡属性；统一用ms单位和通用timing-function；对transform/opacity过渡启用GPU加速。
使用标准 transition 属性并合理添加浏览器前缀，能显著提升 css 过渡动画在不同浏览器中的一致性表现。
优先写标准属性，再补充兼容性前缀
现代浏览器已普遍支持无前缀的 transition，但部分旧版浏览器（如 safari 6.1、android 4.3 webview）仍需 -webkit- 前缀。正确写法是：先写带前缀的声明，再写标准声明，让支持标准语法的浏览器覆盖旧语法。
-webkit-transition: all 0.3s ease;transition: all 0.3s ease;
注意：不要只写前缀版本，也不要颠倒顺序——否则旧浏览器可能误用标准语法而失效。
避免对 transition-Property 使用宽泛值
用 all 虽方便，但容易引发意外行为：不同浏览器对“哪些属性可过渡”的判断略有差异，尤其涉及 auto、inherit 或未明确初始值的属性时。建议显式列出需过渡的属性。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
transition: opacity 0.3s, transform 0.3s; - ❌ 避免：
transition: all 0.3s;（尤其在复杂组件中）
这样既可控，也减少跨浏览器渲染差异。
统一 timing-function 和 duration 单位
部分老版本浏览器（如 IE10、旧版 firefox）对 cubic-bezier() 解析不一致，或对 ms 与 s 混用敏感。建议：
- 统一使用
ms单位（如300ms），避免小数秒带来的解析误差 - 慎用自定义贝塞尔曲线，优先使用
ease、linear、ease-in-out等通用关键字 - 若必须用
cubic-bezier()，确保四个参数都在 [0,1] 范围内（超出可能导致 Safari 忽略整条规则）
检测并处理 transform 触发的重排/重绘差异
当 transition 作用于 transform 或 opacity 时，多数浏览器会启用硬件加速；但某些 Android Webview 或旧版 ios Safari 可能退回到软件渲染，造成卡顿或跳变。可主动触发 GPU 加速：
- 添加
transform: translateZ(0);或will-change: transform;（注意will-change不宜滥用） - 确保过渡元素有明确的
display和position（例如position: relative），避免因渲染树计算差异导致起点偏移
这对解决 chrome 与 Safari 在缩放/位移动画中“起始帧闪动”问题很有效。