animation和@keyframes在旧版Chrome/Firefox/Safari中不生效，因Safari 12及更早、旧Android Webview、Firefox 15前仅识别-webkit-前缀版本，须同时提供无前缀与-webkit-版本并确保@-webkit-keyframes内属性也带前缀。
animation 和 @keyframes 在 Chrome/Firefox/Safari 中为何不生效
直接写 animation 或 @keyframes 时，Safari 12 及更早版本、旧版 Android Webview、部分 Firefox 旧版本（如 Firefox 15 前）会完全忽略动画。这不是语法错误，而是这些浏览器只认带前缀的版本。
- 必须同时提供无前缀 +
-webkit-版本：Safari 和 Chrome 旧版只响应-webkit-animation和@-webkit-keyframes - Firefox 旧版本（-moz-animation，但现代 Firefox（≥16）已完全支持无前缀，
-moz-可省略 - IE10 支持无前缀
animation，但 IE9 及以下不支持任何 CSS 动画，前缀也无效 - 不要只写前缀版——现代浏览器优先匹配无前缀属性，若只有前缀版，新浏览器可能跳过
如何正确书写兼容性 animation 规则
关键不是“全加一遍”，而是按需叠加：先写标准属性，再紧接对应前缀版本，让浏览器自行选择识别的那一个。
.box {
animation: slide-in 0.3s ease-out;
-webkit-animation: slide-in 0.3s ease-out;
}
@keyframes slide-in {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes slide-in {
from { -webkit-transform: translateX(-20px); opacity: 0; }
to { -webkit-transform: translateX(0); opacity: 1; }
}
-
transform同样需要前缀：旧 Safari 要-webkit-transform，且@-webkit-keyframes内部必须用带前缀的属性 - 避免混用：不要在同一个
@keyframes块里写-webkit-transform和transform，浏览器会按规则逐行解析，行为不可控 - 动画名（如
slide-in）必须完全一致，包括大小写和连字符，否则前缀版 keyframes 不会被关联到前缀版 animation
autoprefixer 能否替代手动加前缀
可以，而且推荐——但得配对使用，不能只依赖构建工具默认配置。
- 默认 autoprefixer 配置（如
last 2 versions）已不覆盖 iOS Safari 12 或 Android 4.4 Webview，需显式声明目标：ios_saf >= 12, android >= 4.4 - PostCSS 配合 autoprefixer 会在构建时自动补全
-webkit-，但不会生成-moz-或-ms-（现代 Firefox/Edge 已无需） - 检查输出 CSS：运行后打开 dist 文件，确认
-webkit-animation和@-webkit-keyframes确实存在，别假设“开了插件就万事大吉” - 开发时仍建议手写一份带
-webkit-的最小验证版，排除构建流程干扰
transition 动画是否也要加前缀
是的，尤其涉及 transform 和 opacity 的 transition 在旧 Safari 上极易失效。
- 必须写两遍：
transition: transform 0.2s; -webkit-transition: -webkit-transform 0.2s; -
transform是重灾区：iOS Safari ≤12 对无前缀transform+transition组合支持极差，即使单个属性可用，组合动画也会卡顿或跳变 - 不要只给
transition加前缀而漏掉transform：前缀必须成对出现，否则过渡不触发 - 慎用
all：写transition: all 0.3s;时，前缀版必须明确写出属性，-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;，all无法被前缀化
实际项目里最容易被忽略的，是 @-webkit-keyframes 内部所有 CSS 属性都得带 -webkit- 前缀，而不仅仅是 transform——比如 -webkit-filter、-webkit-backface-visibility 这些配套属性，漏一个，整段动画在旧 Safari 就静止不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
