<p>@keyframes 和 animation 属性易漏加前缀，因 Safari 9–13.1、IE 10–11 等旧浏览器需 -webkit- 或 -ms- 前缀才能生效，且 @-webkit-keyframes 必须与 -webkit-animation 成对出现，否则动画静默失效。</p>
为什么 @keyframes 和 animation 属性容易漏加前缀
动画相关属性是前缀重灾区：比如 @keyframes、animation、transform、will-change 在 Safari 9–13.1、Android Browser 4.4、IE 10–11 中必须带 -webkit- 或 -ms- 才能生效。手动补全时，常只加了 transform 的前缀，却忘了 @-webkit-keyframes 必须成对存在，导致整个动画在旧版 Safari 里静默失效。
@keyframes 补全后长什么样？看真实输出
原始写法（标准语法，不加任何前缀）：
.slide-in { animation: slideInLeft 0.3s ease; }
@keyframes slideInLeft {
from { transform: translateX(-100px); }
to { transform: translateX(0); }
}
Autoprefixer 处理后（以支持 IE 11 + Safari 9 为配置目标）：
.slide-in {
-webkit-animation: slideInLeft 0.3s ease;
animation: slideInLeft 0.3s ease;
}
@-webkit-keyframes slideInLeft {
from { -webkit-transform: translateX(-100px); transform: translateX(-100px); }
to { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideInLeft {
from { transform: translateX(-100px); }
to { transform: translateX(0); }
}
-
@keyframes会被复制一份@-webkit-keyframes，且内部每条声明都补上对应前缀 -
transform在@-webkit-keyframes块内必须同时保留-webkit-transform和标准transform，否则 Safari 6–8 可能忽略整条规则 - 若配置中不含 IE 11，则不会生成
@-ms-keyframes；若不含 Safari 9–13.1，则@-webkit-keyframes不会出现
必须配 browserslist，autoprefixer.browsers 已失效
VSCode 插件里的 "autoprefixer.browsers" 字段在 Autoprefixer 10+ 版本中已被完全弃用。现在它只读取项目级 browserslist 配置，优先级顺序为：.browserslistrc > package.json 中的 browserslist 字段 > 默认值（last 2 versions）。
立即学习“前端免费学习笔记（深入）”；
要让动画前缀覆盖 Safari 9–13.1 和 IE 11，必须在项目根目录建 .browserslistrc，内容如下：
ie >= 11 ios_saf >= 9 safari >= 9 last 2 versions
- 写
safari >= 9而不是last 2 safari，因为 Safari 9 是首个完整支持@keyframes的版本 - 不要写
not safari —— 这类排除语法对动画前缀无效，Autoprefixer 不会反向推导缺失能力 - 如果用 Webpack/PostCSS 构建，确保
postcss.config.js中require('autoprefixer')没传browsers参数，否则会覆盖.browserslistrc
常见失效场景和排查点
明明配了 .browserslistrc，但 animation 还是没加前缀？大概率卡在这几个地方：
- 文件未被识别为 CSS：VSCode 右下角状态栏显示
Plain Text或HTML，需点击切换为CSS或SCSS -
.vue文件中的<style>块默认不处理，插件不扫描嵌入式样式 —— 改用vue-cli内置的 PostCSS 支持，或把动画抽到独立.css文件 - 写了
animation-delay: 0.2s却没生成-webkit-animation-delay？检查browserslist是否包含 Android UC Browser 11 或 iOS Safari 9.3 —— 它们对animation-delay的前缀支持晚于animation-name - 执行命令后无反应：终端运行
npx autoprefixer --info，确认输出里包含supports keyframes和对应浏览器版本，否则说明配置未加载成功
最易被忽略的一点：Autoprefixer 不处理内联样式（style="animation: ..."），也不处理 JS 动态插入的 CSSRule —— 它只作用于静态 CSS 源文件。需要运行时兼容，得靠 CSS-in-JS 库或 polyfill。
