旧版 edge（edge 12–18）不支持 animation-play-state 中间状态切换、getanimations() 返回空数组、@keyframes 非整数百分比解析不稳定致跳帧，且 animationend 事件常静默失败；关键帧须用整数百分比或绝对时间点，animation-fill-mode: both 需降级兼容，steps() 跳帧需靠时间点+显式帧数规避。
旧版 Edge（EdgeHTML 引擎，即 Edge 12–18）对 CSS 动画的实现存在关键缺陷：它不支持 animation-play-state 的中间状态切换、getAnimations() 返回空数组、且对 @keyframes 中非整数百分比（如 33.33%）解析不稳定——这会导致跳帧，不是写法错，是引擎级限制。
旧版 Edge 不触发 animationend 事件
在 Edge 17 及更早版本中，animationend 事件常静默失败，尤其当动画被 JS 中断、或元素在动画中被快速增删时。这会让依赖该事件做状态清理或接力的逻辑直接断裂。
- 不要用
el.addEventListener('animationend', handler)做关键流程控制 - 改用
setTimeout+ 固定时长兜底：setTimeout(handler, duration * 1000 + 50) - 若需精确判断动画是否完成，改用
getComputedStyle(el).animationName轮询（注意性能，仅限必要场景）
@keyframes 百分比关键帧必须为整数
EdgeHTML 对小数百分比（如 16.667%、25.5%）会四舍五入或截断，导致某帧完全跳过。哪怕你写了 steps(6, end)，只要关键帧含非整数，iOS 和 Edge 都会同步丢帧。
- 所有关键帧必须用整数：
0%, 17%, 33%, 50%, 67%, 83%, 100%（而非0%, 16.667%, ...） - 避免用
calc()或变量插值生成百分比，Edge 不解析它们 - 若需精确均分 6 帧，总时长设为
6s，每帧占1s，用时间点替代百分比：0s, 1s, 2s, ..., 6s
animation-fill-mode: both 在 Edge 中部分失效
Edge 16–18 对 animation-fill-mode: both 的首帧锁定支持不完整：0% 关键帧若漏写任一动画属性（比如只写了 transform 却没写 opacity），首帧仍会闪回默认值。
- 0% 关键帧必须显式声明所有参与动画的属性，包括未变化的（如
opacity: 1; transform: translateX(0);） - 降级写法：同时声明
animation-fill-mode: both; animation-fill-mode: forwards;，Edge 会取后者 - 对入场动画，加
visibility: hidden初始态，动画开始时 JS 改为visibility: visible，绕过首帧渲染竞争
steps() 跳帧不能靠改 start/end 修复
在 Edge 中，steps(4, start) 和 steps(4, end) 行为一致——都可能丢第一帧或末帧。这不是参数问题，而是引擎对 steps 时间切片的底层计算偏差。
- 删除所有百分比关键帧，改用绝对时间点定义位移（如
0s, 0.25s, 0.5s, 0.75s, 1s） - 确保 steps 数与关键帧数量严格对应：4 步 → 至少 5 个时间点（含 0s 和 1s）
- 避免在 Edge 中用
background-position+ steps 做雪碧图动画；改用transform: translateX()+ 精确 px 位移
旧版 Edge 的动画问题本质是渲染管线未对齐现代标准，很多“修复”只是绕行。真正关键的不是让动画看起来动了，而是让状态可预测——能准确知道哪一帧该显示什么，比强行补帧更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
