Question

在IE11上查看CSS动画时，我一直在研究奇怪的行为。我已经挖掘了多个实例，其中IE11难以消化类似于Chrome / Firefox的CSS动画，但是，我想一劳永逸地为该“错误”提供解决方案。

如您所见，当用户与“按钮”交互时，预期的动画将从右下角滑入，放大并设置不透明度为1。通用表示下面的方法：

.element {
   ...
   opacity: 1;
   animation: animate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes animate {
    from {
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 0, 500px);
    }
}

但是，在IE11上，它完成的动画比其他浏览器在DOM中的位置要低，导致动画元素从（错误地）结束（动画）的位置“跳转”到所需的位置完成。

在以下网址上可以观察到类似的演示：https://chemonics.com/region/

Answer 1

我已解决此问题，并通过隔离问题解决了该问题，因为该问题不存在“ forwards”的animation-fill-mode属性。通过继承元素初始状态（在动画之前）的样式，这导致动画（为动画定义的关键帧只有0％）结束（100％）。使用更现代的浏览器，它们可以“填补空白”，而使用IE11，可以在空白之间跳转。

https://drafts.csswg.org/css-animations-1/#valdef-animation-fill-mode-forwards

翻译在IE11上表现奇怪的动画吗？

1 个答案: