旧版 webkit 必须用 @-webkit-keyframes，因为 chrome ≤ 43、safari ≤ 8、ios safari ≤ 8.0、android webview ≤ 4.4 等环境未实现标准 @keyframes 解析器，不加前缀则动画规则被完全忽略；需同时声明 @-webkit-keyframes 和 @keyframes 且内容一致，并配套使用 -webkit-animation 和 animation 复合属性。
旧版 WebKit 为什么必须用 @-webkit-keyframes
因为 Chrome ≤ 43、Safari ≤ 8、iOS Safari ≤ 8.0、Android WebView ≤ 4.4 这些环境的渲染引擎尚未实现标准 @keyframes 语法解析器，只认带 -webkit- 前缀的声明。不是“建议加”，而是不加就完全不注册动画规则——@keyframes slideIn { from { opacity: 0; } to { opacity: 1; } } 在 Safari 7.1 里会被直接忽略，连控制台警告都没有。
@-webkit-keyframes 和 @keyframes 能共存吗？
能，但有风险：
- 现代 Safari（≥ 15.4）曾出现同时存在两个版本时，整个动画被静默丢弃的问题——浏览器优先匹配前缀版，但又因解析逻辑冲突导致失效
- 如果只写
@-webkit-keyframes而漏掉标准版，Chrome 50+、Firefox 40+、Edge 12+ 等会彻底无视该动画 - 正确做法是：先写
@-webkit-keyframes，再写@keyframes，且两者内容完全一致、名称大小写严格相同
哪些属性在调用时也得同步加前缀？
光补关键帧不够，animation 相关属性必须配套：
-
animation-name本身不用前缀，但整条animation复合属性要写两遍：animation: slideIn 0.3s ease;和-webkit-animation: slideIn 0.3s ease; -
animation-duration、animation-timing-function等单独属性在旧 WebKit 中基本不支持，必须走-webkit-animation复合写法 - 漏掉
-webkit-animation声明，即使@-webkit-keyframes存在，动画也不会触发
现在还值得手动写前缀吗？
取决于目标环境：
- 若项目明确不支持 Android 4.4 及更早、iOS -webkit- 前缀，现代打包工具（如 PostCSS autoprefixer）默认已停用这些规则
- 若需兼容微信内置浏览器旧版本（基于 X5 内核）、部分国产安卓 WebView（仍用 Blink 41），则仍需保留
@-webkit-keyframes+-webkit-animation - 最容易被忽略的一点：Tailwind 或其他 CSS-in-JS 方案中，
keyframes配置名和animation引用名必须字面完全一致，多一个空格或下划线都会让旧 WebKit 的 fallback 彻底失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
