CSS动画兼容性及语法使用指南

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《CSS动画属性兼容性分析与语法规范》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

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 单文件组件中