不需要。Chrome 50+ 和 Firefox 40+ 已原生支持标准 @keyframes，无需 @-webkit-keyframes；仅需兼容 iOS Safari ≤ 8、Android WebView ≤ 4.4 或旧版 Safari ≤ 8 时才保留，且须同步添加 -webkit-animation。
Chrome 50+ 和 Firefox 40+ 还需要写 @-webkit-keyframes 吗？
不需要。现代主流浏览器（Chrome ≥ 50、Firefox ≥ 40、Safari ≥ 9、Edge ≥ 12）已原生支持标准 @keyframes，无需任何前缀。@-webkit-keyframes 仅对 Safari ≤ 8、Android Browser ≤ 4.4、旧版 Chrome（≤ 43）等极少数环境生效。现在加前缀反而可能干扰解析——比如 Safari 15.4 曾因同时存在 @keyframes 和 @-webkit-keyframes 导致动画被忽略。
哪些场景下仍必须保留 @-webkit-keyframes？
只在明确需兼容以下环境时才加：
- iOS Safari ≤ 8（对应 iOS ≤ 8.4，2015 年及更早）
- Android WebView ≤ 4.4（系统级 WebView，非 Chrome APK）
- 旧版桌面 Safari（≤ 8）
若项目最低支持 iOS 9+ 或 Android 5+，可安全移除所有 @-webkit- 前缀。检查方式：打开目标设备的开发者工具 → 查看 animation 是否触发；或用 caniuse 确认实际覆盖范围。
@keyframes 写法差异：命名、百分比、属性值是否要加前缀？
关键帧内部的 CSS 属性是否加前缀，取决于该属性本身是否需要兼容旧浏览器，和 @keyframes 前缀无关。例如：
@keyframes slide {
0% {
transform: translateX(0); /* 不需要 -webkit-transform */
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0.5;
}
}
但如果你用了 filter: blur(2px)，而需兼容 Safari ≤ 9，则必须写成 -webkit-filter: blur(2px) —— 因为 filter 属性本身有前缀需求，不是 @keyframes 的问题。
自动补全前缀还有没有意义？
PostCSS 插件（如 autoprefixer）默认已不再为 @keyframes 添加 -webkit- 规则，除非你显式配置了极老的目标浏览器（如 ios_saf ）。运行 <code>npx autoprefixer --info 可查当前配置支持的版本。盲目开启“全前缀”模式，会导致生成冗余代码，且可能引发 Safari 对重复规则的解析异常。
真正容易被忽略的是：动画触发属性（animation、animation-name）本身不需要前缀，但旧版 Safari 要求 -webkit-animation 配合 -webkit-keyframes 使用——这意味着，如果写了 @-webkit-keyframes，就必须同步写 -webkit-animation，否则动画不执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
