翻译在IE11上行为古怪的动画？

Question

当我在IE11上观看CSS动画时，我一直在调查和奇怪的行为。我已经发现了多个例子，其中IE11很难消化类似Chrome/Firefox的CSS动画，但是，我想一劳永逸地为这个"bug“提供一个解决方案。

行为示范： http://recordit.co/6urL1s8XgR

如您所见，当用户与“按钮”交互时，预期的动画将从右下角滑入，向上缩放，并将不透明度设置为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中完成的动画比其他浏览器要低，导致动画元素从它(不正确)结束的地方(动画)跳到它需要完成的地方。

在下面的url中可以看到类似的演示：https://chemonics.com/region/

Answer 1

我已经解决了这个问题，隔离的问题是“前进”的动画填充模式属性不存在。这导致动画通过继承元素初始状态的样式(在动画之前)结束(仅为动画定义了0%的关键帧)。随着更现代的浏览器，他们“填补空白”，而使用IE11，好，它之间的差距。

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