Chrome/Firefox/Safari中animation不生效最常见原因是缺失-webkit-前缀，尤其Safari 15.4前、旧Android WebView及Firefox 52以下版本对cubic-bezier等语法支持不全；autoprefixer需通过postcss-loader接入构建流程，且.browserslistrc须明确指定目标浏览器；@keyframes和transform相关值必须双写前缀，手动与自动前缀混用会导致冲突；opacity动画在iOS Safari中比transform更易卡顿。
Chrome/Firefox/Safari里animation不生效的典型表现
最常见的是animation写了但完全不动，或者@keyframes定义了却没触发——八成是缺了-webkit-前缀。Safari 15.4之前、旧版Android WebView、部分Firefox早期版本（如52以下）对标准语法支持不全，尤其animation-timing-function用ease-in-out没问题，但换成cubic-bezier(.2,0,.1,1)就可能在iOS Safari里卡住。
autoprefixer不是装上就能用，得配对postcss-loader
很多人装了autoprefixer但动画还是失效，问题出在构建链路没接上。它必须通过postcss-loader注入Webpack或Vite流程，单独运行CLI命令（比如npx autoprefixer）只改源文件，不参与实时编译。
- Webpack项目：确保
postcss-loader在css-loader之后、style-loader之前 - Vite项目：直接在
vite.config.ts里配css.postcss.plugins，加require('autoprefixer') - 目标浏览器要明确写进
.browserslistrc，比如last 2 versions, iOS >= 12, Android >= 6，空着或写defaults会漏掉老内核
哪些CSS动画属性必须加前缀，哪些其实不用
animation、animation-name、animation-duration这些基础属性现在基本不用前缀；真正需要的是@keyframes规则名和transform相关的动画值。比如transform: rotateZ(45deg)在旧Safari里必须写成-webkit-transform: rotateZ(45deg)，否则旋转动画直接跳过。
-
@keyframes块本身要双写：@keyframes slide+@-webkit-keyframes slide -
will-change: transform在iOS 13.3以下必须加-webkit-前缀才生效 -
backface-visibility在Android 4.4 WebView里不加前缀等于没设
手写前缀+autoprefixer混合时的冲突风险
如果代码里已经手动写了-webkit-animation，而autoprefixer又配置了自动补全，会导致同一属性出现两次，某些老浏览器（如UC内核）会按顺序取第一个，结果反而是带前缀的版本被忽略。
立即学习“前端免费学习笔记（深入）”；
- 统一策略：要么全交给
autoprefixer，源码里只写W3C标准语法 - 要么彻底禁用插件，手写时用
@supports (-webkit-animation: none)做降级包裹 - 检查输出CSS是否含重复声明，用
grep -n "webkit.*animation" dist/*.css快速定位
前缀补全只是兼容手段的一环，真正难的是判断哪个动画步骤在哪个内核下会丢帧——比如opacity动画在iOS Safari里比transform更易卡顿，这种细节没法靠插件解决。
