ie11的css动画必须拆解为带-ms-前缀的单值属性，禁用复合写法、css变量、calc()、filter、clip-path及非法关键帧名，并添加x-ua-compatible meta强制标准模式。
IE11 的 CSS 动画不是“偶尔不生效”，而是整条 animation 复合声明被静默跳过——不报错、不警告、也不 fallback。必须拆解、加前缀、规避现代语法，否则动画根本不会启动。
必须拆解 animation 复合属性并添加 -ms- 前缀
IE11 完全不识别 animation: slide-in 0.3s ease-in-out 这类写法，整行规则直接丢弃。你看到的“没动画”，其实是浏览器压根没读那行 CSS。
- 必须显式写出单值属性：
-ms-animation-name、-ms-animation-duration、-ms-animation-timing-function、-ms-animation-iteration-count -
animation-timing-function只支持ease、linear、ease-in、ease-out、ease-in-out；cubic-bezier()会被整条忽略 - 不要混用现代和旧写法，例如
animation: slide-in 0.3s; -ms-animation-name: slide-in;—— IE11 仍会跳过第一行，且第二行可能因缺少 duration 而无效
@keyframes 规则里禁止任何 IE11 不认识的语法
IE11 的 @keyframes 解析器极其脆弱：只要块内出现一个非法字符或属性，整个动画规则就被抛弃，连基础帧都不执行。
- 关键帧名只能是小写字母 + 下划线 + 数字，且不能数字开头（
slidein✅，slideIn❌，slide-in❌，1st-slide❌） - 禁用
var(--color)、calc(100% - 20px)、filter、clip-path、transform: rotateZ()等 —— 它们不会降级，只会让该帧失效 - 硬件加速相关声明（如
will-change: transform）在 IE11 中反而导致卡顿或停帧，应移除；如需触发 GPU 加速，仅用transform: translate3d(0, 0, 0)
避免依赖 animation-fill-mode: forwards
animation-fill-mode: forwards 在 IE11 中行为不可靠，终态样式常不保留，导致元素“闪回”到初始状态。
- 不要指望它自动维持最后一帧样式
- 改用 JS 控制终态：
element.style.animationPlayState = 'paused'，再手动设置最终transform或opacity值 - 若动画只是简单显隐或位移，优先用
transition+ class 切换代替animation，兼容性更稳
SVG 动画需额外补全所有前缀和命名
IE11 支持 SVG 的 CSS 动画，但条件苛刻：前缀、名称、属性三者必须完全对齐，缺一不可。
-
@-webkit-keyframes、@-moz-keyframes、@keyframes都要写全，且名称严格一致（如都叫fill-bounce） - 动画属性必须带前缀：
-webkit-animation-name、-ms-animation-name，不能只写animation-name - SVG 内联
fill可被动画控制，但禁止用currentcolor或 CSS 变量 —— IE11 不解析它们，整条fill声明失效
最易被忽略的是：IE11 对 @keyframes 的解析发生在样式表加载阶段，而非运行时。哪怕你 JS 动态插入带合法语法的 @keyframes，它也不会生效 —— 必须确保这些规则在初始 HTML 的 <style></style> 或外链 CSS 中就已存在。另外，别忘了强制标准模式：<meta http-equiv="X-UA-Compatible" content="IE=edge"> 必须放在 最顶部，否则动画解析器可能退化到怪异模式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
