Chrome 28前、Safari 8前、iOS Safari 7.1前、Android Browser 4.3及更早需-webkit-前缀；Firefox/Edge 12+无需前缀，Opera 12.1前需-o-；现代项目支持Chrome 70+/Safari 12.1+/iOS 12.2+可不用前缀，但Android 4.4仍需保留。
animation 和 @keyframes 在哪些浏览器里要加 -webkit- 前缀
Chrome 28 以前、Safari 8 以前、iOS Safari 7.1 以前、Android Browser 4.3 及更早版本，animation 和 @keyframes 必须带 -webkit- 前缀才能生效。Firefox 和 Edge（12+）从一开始就没要求前缀，但早期 Opera（12.1 之前）需要 -o-。
常见错误现象：animation 完全不触发，控制台无报错，开发者工具里动画属性显示为“invalid”或灰色不可编辑；或者只有部分浏览器动，另一些静止不动。
- 现代项目如果只支持 Chrome 70+ / Firefox 65+ / Safari 12.1+ / iOS 12.2+，可直接用标准语法，无需前缀
- 若需兼容 Android 4.4（WebView 基于旧版 Blink），仍得保留
-webkit-animation和@-webkit-keyframes - 注意：不能只写前缀版而漏掉标准版——新浏览器会忽略带前缀的声明，导致动画失效
transition 属性是否也要加 -webkit- 前缀
是的，但范围比 animation 小。Chrome 25 以前、Safari 6.0–6.1、iOS Safari 6.0–6.1 对 transition 和 transform 等属性强制要求 -webkit- 前缀；Safari 7+ 已支持无前缀 transition，但某些组合（比如 transition: all 0.3s ease 配合 transform）在 Safari 9.0 仍有渲染抖动，加前缀反而更稳。
使用场景：做页面内平滑展开/收起、按钮 hover 变化、模态框淡入时，容易因前缀缺失在旧 Safari 上卡顿或跳变。
立即学习“前端免费学习笔记（深入）”；
-
transition单独使用时，Chrome 26+、Firefox 16+、Edge 12+ 全部支持无前缀 - 但涉及
transform或filter的过渡，iOS Safari 9.2 之前必须写-webkit-transition才能触发硬件加速 - 不要对
opacity过渡加前缀——它从来不需要，加了反而可能干扰层叠上下文
autoprefixer 能不能完全替代手动加前缀
可以，但得配对正确目标环境。默认配置（如 last 2 versions）在 2024 年已不覆盖 Android 4.4 或 iOS 9，会导致这些设备上动画失效。
性能影响：多余前缀不会拖慢渲染，但会增大 CSS 体积；兼容性影响更大——漏掉关键前缀比多写几个更致命。
- 推荐写法：
"supports": ["> 0.5%", "iOS >= 9", "Android >= 4.4"]，比模糊的last 2 versions更可控 - 检查生成结果：编译后搜
-webkit-animation，确认它出现在关键规则里；如果没出现，说明目标环境太新，或配置被其他工具（如 PostCSS preset-env）覆盖 - 注意：Vue / React 单文件组件中
内的动画规则，autoprefixer 默认仍会处理，但需确保 loader 链路没跳过 PostCSS
will-change: transform 导致动画失效的隐藏原因
加了 will-change: transform 后动画突然不动，不是前缀问题，而是触发了层合成逻辑冲突。尤其在 Safari 10–12 和旧版 Chrome 中，will-change 会让元素提前升层，导致后续 transform 动画被跳过或卡在初始帧。
这不是 bug，是规范允许的优化行为——浏览器认为你“即将改变”，就提前准备，结果你改的是同一属性，反而绕过了动画管线。
- 调试方法：删掉
will-change，动画恢复 → 基本可定位为此问题 - 替代方案：用
transform: translateZ(0)或opacity: .99触发硬件加速，比will-change更稳妥 - 真正需要
will-change的场景极少，仅限滚动中频繁变化的元素（如 sticky header），且应在动画开始前 JS 动态添加，结束后立刻移除
前缀只是表象，真正卡住人的往往是层合成时机、属性可动画性判断、以及不同引擎对 will-change 的实现差异。盯着 caniuse 查兼容性不如打开真机调试器看 computed 样式里 animation 是否被标记为 active。
