怎样解决CSS3动画在旧版Safari中的前缀问题

作者：袖梨 2026-09-10

旧版Safari（6.1–15.4）需手动双写@keyframes与@-webkit-keyframes、动画调用及transform属性均加前缀，禁用CSS变量和calc()、拆分transform多值、统一用0%/100%、补全分号，并配置autoprefixer或postcss-keyframes插件。

旧版Safari根本没解析@keyframes，不是卡顿而是静默失效

写完@keyframes slideIn和animation: slideIn 0.3s，元素却一动不动——这不是 timing 写错，是 Safari 6.1–15.4（尤其是 iOS 15 及更早）压根不识别标准语法。开发者工具里根本看不到那条 animation 声明，连划掉都算不上，直接跳过整条规则。

必须成对声明：@keyframes slideIn 和 @-webkit-keyframes slideIn，名称大小写一字不差（slidein ≠ slideIn）
调用处也得双写：animation: slideIn 0.3s; 后紧接一行 -webkit-animation: slideIn 0.3s;
切忌混写：同一个 CSS 块里同时出现 animation 和 -webkit-animation，Safari 6.1 会直接忽略整条声明
@-webkit-keyframes 内部的属性（如 transform）也要加前缀，否则老 Safari 可能只执行第一个变换

@keyframes里用了var(--x)，整个关键帧块就丢了

iOS Safari 15.6 之前版本完全不解析 CSS 变量，只要 @keyframes 里出现 var(--offset) 或 color: var(--primary)，整段关键帧定义会被浏览器丢弃——动画名还在，但内容为空，结果就是“调用了却没效果”。

把变量值硬编码进关键帧，比如把 transform: translateX(var(--dist)); 改成 transform: translateX(100px);
避免在关键帧中使用任何 calc() 套 var() 的组合，老 Safari 解析器会直接崩溃
如果项目必须用主题色变量，可在 JS 中生成对应的关键帧字符串并注入 <style>，绕过 CSS 解析阶段

transform多值写法会让 Safari 直接跳过整帧

@keyframes 里写 transform: translateX(0) rotate(0deg) scale(1); 这种单行多值，在 Safari 6.1–9.3 中极不稳定：可能只应用 translateX，也可能整帧跳过，导致动画卡在第一帧或突然跳变。

拆开写：用不同百分比阶段分别控制单一变换，例如 0% { transform: translateX(0); }、50% { transform: rotate(180deg); }、100% { transform: scale(1.2); }
不要依赖 from/to 关键字，统一用 0%/100%，部分 Safari 版本对 from 解析失败
每条声明结尾必须加分号，Safari 9 对语法错误极其敏感，漏一个分号可能导致后续所有关键帧失效

autoprefixer 不会帮你补 @-webkit-keyframes，得手动写或配插件

装了 autoprefixer 却没看到 @-webkit-keyframes，不是插件坏了，是它默认只补属性前缀（如 -webkit-transform），不生成规则体。靠它自动补全前缀，等于没补。

Webpack 项目里，确保 postcss-loader 在 css-loader 之后、style-loader 之前；Vite 要在 vite.config.ts 的 css.postcss.plugins 中显式 require('autoprefixer')
.browserslistrc 必须明确包含目标，比如 ios_saf <= 15.4 或 safari <= 15，写 last 2 versions 会漏掉关键区间
需要自动生成 @-webkit-keyframes，得额外引入 postcss-keyframes 这类插件，autoprefixer 本身做不到
手写了 @-webkit-keyframes 又开了 autoprefixer，可能造成重复声明，某些旧 UC 浏览器会取第一个而失效