ie11的css动画必须拆解为带-ms-前缀的单值属性，禁用复合写法、css变量、calc()、filter、clip-path及非法关键帧名，并添加x-ua-compatible meta强制标准模式。
IE11 的 CSS 动画不是“偶尔失效”，而是解析规则和现代浏览器根本不同——不拆解、不降级、不规避，动画大概率静默失败。
animation 复合属性在 IE11 中直接被跳过
IE11 不识别 animation: slide-in 0.3s ease-in-out 这类写法，哪怕语法完全合法。它会整条规则忽略，不报错、不警告、也不 fallback。
- 必须拆成单值属性，并加
-ms-前缀：-ms-animation-name、-ms-animation-duration、-ms-animation-timing-function、-ms-animation-iteration-count -
animation-timing-function在 IE11 中只认ease、linear、ease-in、ease-out、ease-in-out；cubic-bezier(0.2, 0.8, 0.4, 1)会被静默丢弃 -
animation-fill-mode: forwards行为不可靠，建议改用 JS 控制终态：element.style.animationPlayState = 'paused'，再手动设最终样式
@keyframes 规则里混入任何现代语法都会导致整个动画失效
IE11 的 @keyframes 解析器极其脆弱：只要块内出现一个它不认识的语法，整段规则就被跳过。
- 禁止使用
var(--color)或calc(100% - 20px)—— 它们不会降级，而是让整个@keyframes变成无效 - 关键帧名只能是小写字母 + 下划线 + 数字（且不能数字开头），如
slidein✅，slideIn❌，slide-in❌，1st-slide❌ - 避免在
@keyframes中使用filter、clip-path、transform: rotateZ()等 IE11 未实现的属性，否则该帧直接不执行
硬件加速相关声明在 IE11 中反而破坏动画稳定性
IE11 对 GPU 加速的处理存在底层 Bug，启用后容易卡顿、闪烁或停在中间帧，且无法通过 DevTools 复现。
- 移除所有
will-change: transform—— 它在 IE11 中没有收益，只有风险 - 若需触发硬件加速，优先用
transform: translate3d(0, 0, 0)，而非translateZ(0)（后者兼容性更差） - 避免父容器同时设置
filter: alpha(opacity=xx)和子元素opacity动画，二者叠加极易触发重绘异常
SVG 元素的 fill 动画需要额外前缀和 keyframes 写法
IE11 支持 SVG 的 CSS 动画，但必须显式写出所有厂商前缀，且 @keyframes 名称和属性名都不能省略前缀。
-
@-webkit-keyframes、@-moz-keyframes、@keyframes都要写全，且名称一致 - 动画属性必须带前缀：
-webkit-animation-name、-ms-animation-name，不能只写animation-name - SVG 内联样式中的
fill可被动画控制，但不要用currentcolor或变量，IE11 不解析
最易被忽略的一点：即使你写了所有前缀、拆解了属性、命名也合规，如果页面没强制 <meta http-equiv="X-UA-Compatible" content="IE=edge">，IE11 仍可能回退到兼容模式，此时所有动画相关 CSS 都不生效——这个 meta 必须在 最前面，且不能被条件注释包裹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
