Safari/Android WebView等旧浏览器不支持@keyframes和animation，需手动添加-webkit前缀并严格配对书写，且名称大小写敏感、transform多值需拆分、避免CSS变量和display切换。
animation 和 @keyframes 在 Safari/Android WebView 里完全不动
不是“动得慢”，是压根不解析。Safari 6.1–15.4、Android 4.3 WebView、Firefox 15 前这些环境根本不认识 @keyframes 和 animation 这两个词，连 CSS 规则体都跳过，开发者工具里也看不到它们——不是被划掉，是根本没出现。
常见错误现象：animation: slideIn 0.3s ease; 写了但元素静止；或者 @keyframes slideIn 定义了，调用时却没反应。这时候别查 timing-function，先确认浏览器是否支持基础语法。
- 必须成对写：
@keyframes slideIn+@-webkit-keyframes slideIn，内容一字不差 - 调用处也要双写：
animation: slideIn 0.3s;和-webkit-animation: slideIn 0.3s; - 切忌混用：如果写了
-webkit-animation，就别在同个声明块里再写无前缀版，Safari 6.1 会直接忽略整条animation声明 -
@-webkit-keyframes内部的属性（比如transform）也得加前缀，否则旧 Safari 可能只执行第一个变换，或丢弃整帧
autoprefixer 没生效？大概率卡在构建链路或 browserslist 配置
装了 autoprefixer 却没补出 -webkit-，问题不在插件本身，而在它根本没跑进你的 CSS 编译流程。
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会漏掉 Safari 12–15.4 这类关键区间 -
autoprefixer不处理@keyframes规则体——它只补属性前缀，@-webkit-keyframes得你手写或靠 PostCSS 插件（如postcss-keyframes）生成 - 手动写了
-webkit-animation又开了 autoprefixer，可能导致重复声明，UC 或旧 QQ 浏览器会取第一个，反而失效
@keyframes 里用了 transform 多值，老 Safari 直接崩溃
Safari 6.1–9.3 对 @-webkit-keyframes 中的 transform 解析极脆弱。写 transform: translateX(0) rotate(0) 这种多值一行，它可能只应用 translateX，或整段跳过。
- 拆开写：不同动画阶段用不同 keyframe，每帧只设一个
transform值，比如transform: translateX(0);和transform: rotate(0deg);分开定义 - 避免 CSS 变量：
var(--offset)在 Safari 9.1 及更早版本不被@keyframes支持，值会变成invalid -
animation-fill-mode: forwards在 Android 4.3 WebView 里有 bug，建议用 JS 在动画结束时手动加 class 固定终态
IE9 及以下？别挣扎，换 JS 驱动 transition
IE9 不支持 @keyframes，也不识别 animation 属性，加任何前缀都没用——它连解析器分支都不进。
这时候硬上 CSS 动画等于放弃兼容。可行路径只有一条：用 JS 控制 class 切换，配合 transition + transform/opacity 实现等效效果。
- 确保
transition也带前缀：-webkit-transition、-moz-transition，且标准版写在最后 - 别用
display: none → block触发过渡——IE9 下完全无效，改用visibility: hidden → visible+opacity - 需要动态高度动画？
max-height是唯一靠谱 fallback，别碰height: auto
@keyframes 名称大小写敏感**。Safari 14 之前，@keyframes SlideIn 和 animation: slideIn 就算内容一致也会失败——名称必须逐字符相同。还有，iOS 微信内置浏览器用的是滞后内核，哪怕你写了全套前缀，只要关键帧超过 3 步或含 backface-visibility，动画就可能静止。 
