翻译在 IE11 上表现异常的动画？

Question

我一直在调查在 IE11 上查看 CSS 动画时的奇怪行为。我已经挖掘出多个实例，其中 IE11 努力消化类似于 Chrome/Firefox 的 CSS 动画，但是，我想一劳永逸地为这个 "bug" 提供一个解决方案。

如您所见，当用户与 "button" 交互时，预期的动画是从右下角滑入，放大并将不透明度设置为 1。generic 以下方法的表示：

.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，导致动画元素从它（错误地）结束（动画）的地方 "jump up" 到需要完成。

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

Answer 1

我已经通过隔离 "forwards" 的动画填充模式属性不存在的问题解决了这个问题。这导致动画（只有为动画定义的 0% 关键帧）通过继承元素初始状态（在动画之前）的样式结束（在 100%）。对于更现代的浏览器，它们 "fill in the gaps" 而对于 IE11，它在间隙之间跳跃。

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

翻译在 IE11 上表现异常的动画？

translate animations behaving oddly on IE11?

css

internet-explorer

css-animations

internet-explorer-11