时间戳

首页 > 解决方案 > 翻译在 IE11 上表现异常的动画？

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

问题描述

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

行为示范： 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/

标签： cssinternet-explorerinternet-explorer-11css-animations

解决方案

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

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

推荐阅读