在 MSIE11 中动画后动画消失

Question

我在 MSIE11 中有一个奇怪的错误，动画元素在动画结束后立即消失。

看这个例子

.cta-43274891247129739-info {
  position: absolute;
  left: 0;
  top: 50px;
  margin: 10px 10px;
  animation: cta-43274891247129739 4s 1s both ease-out;
  text-align: center;
}
@keyframes cta-43274891247129739 {
  0% {
    transform: translateY(1em);
    opacity: 0;
  }
  16.6667%, 83.3333% {
    opacity: 1;
    transform: translateY(0em);
  }
  100% {
    transform: translateY(-40px);
  }
}

<div class="cta-43274891247129739-info">This animation fades in from the bottom, makes a short stop and then translates up to its final halt. But not on MSIE11, where it will dissappear apruptely at the end of the animation </div>

Answer 1

MSIE11 存在动画问题，尤其是涉及不同单位的计算。

在您的特定示例中，动画效果完美，直到最后一个关键帧。达到 100% 后，文本似乎消失了，但实际上仍然存在，仅向上移动了 40em。

所以工作流程看起来像这样：

moves up by 1em => moves up by 0em => moves up by 40px => moves up by 40em

所以到最后一点，文本已经远远高于视口，似乎已经消失了。

解决这个问题的方法是不要混合使用 px 和 em。

如果您在最后一个关键帧上将 -40px 更改为 -4em，动画将正常工作，也许不会是像素完美，但至少它会工作。