IE11不支持animation复合属性写法，需拆解为带-ms-前缀的单值属性；禁用CSS变量、calc()、filter、clip-path及非法关键帧名，并避免will-change等硬件加速Bug。
IE11不支持animation复合属性写法
IE11只认分开写的单值动画属性，比如animation-name、animation-duration，但对animation: slide-in 0.3s ease;这种复合写法解析不稳定——尤其当值中含空格、斜杠或自定义关键字时，容易直接忽略整条规则。
常见错误现象：动画完全不触发、只执行第一帧、或在页面刷新后偶发生效。
- 必须用
-ms-前缀拆解所有子属性，例如：animation-name→-ms-animation-name -
animation-timing-function在IE11中不支持ease-in-out以外的贝塞尔曲线（如cubic-bezier(0.2, 0.8, 0.4, 1)会被静默丢弃） -
animation-fill-mode: forwards在IE11中部分失效，建议改用animation-play-state: paused配合JS手动控制终态样式
@keyframes规则里用了CSS变量或calc()表达式
IE11根本不解析var(--color)或calc(100% - 20px)，一旦出现在@keyframes块内，整个动画规则会被浏览器跳过，不报错也不渲染。
使用场景：你试图让动画适配主题色或响应式尺寸，但在IE11里这些值全变成invalid。
立即学习“前端免费学习笔记（深入）”；
- 把变量值提前写死，比如
background: #007acc;而不是background: var(--primary); - 用预设的固定像素/百分比替代
calc()，例如transform: translateX(80px);而非translateX(calc(100% - 20px)); - 避免在
@keyframes中使用filter、clip-path等IE11未实现的属性
动画元素触发了IE11的硬件加速Bug
IE11对transform: translateZ(0)或will-change: transform的处理极不稳定——有时强制开启GPU加速反而导致闪烁、错位或动画卡死在中间帧。
性能影响：这类写法在其他浏览器能提升60fps流畅度，但在IE11里大概率降低渲染准确率，且无法通过DevTools复现（F12调试器本身会改变渲染路径）。
- 移除所有
will-change声明 - 用
transform: translate3d(0, 0, 0)代替translateZ(0)（IE11对translate3d兼容性略好） - 若动画涉及
opacity变化，确保父容器没设filter: alpha(opacity=xx)（两者叠加会触发重绘异常）
关键帧名含大写字母或特殊符号
IE11的@keyframes解析器对命名极其敏感：名称里只要出现大写字母（如slideIn）、连字符（slide-in）或数字开头（1st-slide），整个动画就会静默失败。
容易踩的坑：你复制了现代框架生成的动画名，没注意命名规范，结果在Chrome里正常，IE11里毫无反应。
- 统一用小写字母+下划线，例如
slide_in、fade_out - 检查
animation-name引用是否与@keyframes定义完全一致（区分大小写） - 避免用
@keyframes嵌套或SCSS变量注入名称，IE11不识别预处理器逻辑
最常被忽略的是：即使写了-ms-前缀，IE11仍要求@keyframes定义和调用必须在同一CSS作用域内——跨@import或外链文件引入的动画名，IE11大概率找不到。
