现代浏览器已原生支持@keyframes，无需-webkit-前缀；强行添加反而导致Safari跳帧或Chrome重复执行；仅需写@keyframes fadeIn；旧版iOS/Android WebView除外。
keyframes 里写 -webkit- 前缀根本没用
现代浏览器（Chrome 100+、Firefox 110+、Safari 16.4+）已原生支持 @keyframes，无需手动加 -webkit- 或 -moz-。强行加上反而可能触发 Safari 的旧解析路径，导致动画跳帧或不触发。
常见错误现象：-webkit-keyframes fadeIn 在 Safari 17 上被忽略，但去掉前缀后正常；或动画在 Chrome 中重复执行两次（因为同时匹配了带前缀和无前缀两个规则）。
- 只写标准语法：
@keyframes fadeIn，别写@-webkit-keyframes fadeIn - 如果必须兼容 iOS 12–15.6 或 Android WebView
- 检查构建工具：PostCSS Autoprefixer 默认对
@keyframes不加前缀（supports: keyframes已默认启用），不用额外配置
PostCSS + autoprefixer 真的能自动补全吗
能，但有个关键前提：你的 CSS 必须是通过 PostCSS 流水线处理的，且 autoprefixer 插件版本 ≥ 10.4.0，并启用了 overrideBrowserslist 或项目根目录有 .browserslistrc。
使用场景：你在 src/index.css 里写了 @keyframes slideX，期望它在打包后自动注入 @-webkit-keyframes slideX —— 这不会发生。Autoprefixer 不为 @keyframes 补前缀，只补属性（比如 transform、animation）。
立即学习“前端免费学习笔记（深入）”；
- 真正需要前缀的是
animation属性本身，例如：animation: slideX 1s→ 编译后变成animation: slideX 1s; -webkit-animation: slideX 1s -
@keyframes块内所有声明（transform、opacity）会被单独加前缀，但块名和@规则本身不加 - 验证方式：运行
npx autoprefixer --info，确认输出中包含keyframes: true
为什么 Safari 15.4 里 keyframes 动画突然不执行了
不是前缀问题，是 Safari 对空关键帧或未定义状态的处理更严格了。典型表现：动画从 0% 直接到 100%，中间缺 50%，且 0% 和 100% 样式完全一样，Safari 会直接跳过整个动画。
容易踩的坑：
- 用变量生成关键帧时，
0%和100%的transform值意外相同（比如都算出translateX(0)） - 在 CSS-in-JS 中动态插值，字符串拼错导致某帧为空（如
css`@keyframes x { ${badStr} }`） - Safari 15.4+ 要求至少两个非重复的关键帧，否则视为无效规则（DevTools 里能看到该
@keyframes被标记为 “invalid”）
实操建议：在 Safari 开发者工具的 “Styles” 面板里展开 @keyframes 规则，看是否显示 “This @keyframes rule is invalid”。修复方法是确保 0% 和 100% 的声明至少有一项不同（哪怕只是加个 opacity: .999）。
要不要用 CSS @layer 解决多 keyframes 冲突
不用。@layer 是为层叠顺序设计的，和前缀或兼容性无关。多个同名 @keyframes 规则（无论是否在 layer 里）会按 CSSOM 顺序覆盖，最后定义的生效——这跟前缀无关，也解决不了 Safari 不识别的问题。
真正有用的是命名隔离：
- 避免手写重复名：用 BEM 式命名，如
fadeIn_modal_v2、slideIn_sidebar - 在构建时用 PostCSS 插件自动哈希化名称（如
postcss-keyframes-hash），适合大型组件库 - 注意：CSS 模块（CSS Modules）默认不处理
@keyframes，需配合postcss-modules-values或自定义插件
复杂点在于：动画名一旦被 JS 通过 element.animate() 或 getAnimations() 引用，就和 CSS 文件里的字面量强绑定——改名就得同步改 JS，这点很容易被忽略。
