ie10/ie11需同时声明@-ms-keyframes和@keyframes及-ms-animation和animation，且ie10不支持animation-fill-mode:forwards，须用js补足。
animation 属性在 IE10/IE11 里不生效
IE10–11 支持 @keyframes 和 animation，但只认带 -ms- 前缀的版本，且必须同时声明无前缀和带前缀两个规则，否则直接忽略整个动画块。
- 必须写两遍
@keyframes：一次带@-ms-keyframes，一次不带前缀（顺序无所谓，但都得有） -
animation属性本身也要重复声明：-ms-animation+animation，不能只写一个 - IE10 不支持
animation-fill-mode: forwards，即使写了也无效；需要靠 JS 在动画结束时手动加类或改样式 - 示例片段：
@-ms-keyframes slide-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } } .element { -ms-animation: slide-in 0.3s; animation: slide-in 0.3s; }
Chrome 旧版（
这些浏览器对 @keyframes 内部语法更敏感，尤其拒绝百分比以外的关键词（比如 from/to 在某些 Safari 版本中会被跳过），也容易因空格、换行或注释位置报错。
- 统一用
0%/100%替代from/to，兼容性更稳 - 避免在
@keyframes块内写 CSS 注释（/* ... */），部分 Safari 会解析失败 - 确保每条声明结尾有分号，哪怕最后一行——Safari 9 对此很严格
- 不要在关键帧里用自定义属性（
var(--x)），旧引擎不识别，会整段丢弃
动画在 iOS Safari 中一闪而过或根本不动
iOS Safari（尤其 12–14）对触发条件极其苛刻：元素没进入渲染流、没设置明确尺寸、或缺少硬件加速提示，动画就可能被跳过或降级为同步绘制。
- 给动画元素加上
transform: translateZ(0)或will-change: transform，强制启用 GPU 加速 - 确保元素有明确宽高（哪怕
width: 0; height: 0;也不行，至少是height: 1px） - 如果元素初始
display: none，切到block后立刻加动画类，iOS 可能来不及触发——要加个setTimeout(() => ..., 0)或用requestAnimationFrame延迟一帧 - 避免在
:hover上直接写复杂动画，iOS 没有 hover 状态，这类写法等于失效
Firefox 旧版（
Firefox 56 及更早版本对复合动画（多个属性同时变化）优化差，尤其涉及 top/left 这类触发布局计算的属性时，会频繁重排导致掉帧。
- 只对
transform和opacity做动画，其他属性（width、background-color）尽量避免 - 不要在
@keyframes里写!important，Firefox 旧版会直接忽略该帧 - 如果用 JS 控制动画节奏，别依赖
setTimeout，优先用requestAnimationFrame；Firefox 54+ 才稳定支持animationstart等事件 - 检查是否启用了
layout.css.prefixes.webkit（about:config），关闭它可避免 WebKit 前缀干扰解析
最麻烦的不是写多少前缀，而是不同浏览器对“同一份 CSS”的解析断点完全不同——比如 Safari 忽略某条声明，Firefox 跳过整个 @keyframes 块，IE 则静默失败。上线前务必在真机上逐个验证触发逻辑，而不是只看 DevTools 里有没有报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
