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

【问题标题】：translate animations behaving oddly on IE11?翻译在 IE11 上表现异常的动画？
【发布时间】：2018-06-28 02:20:53
【问题描述】：

我一直在调查在 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/

【问题讨论】：

re: chemonics.com/region 你有几个 MARKUP 错误，结束标签不匹配。例如。 HTML1509：不匹配的结束标记。地区 (678,1)。请更正这些错误。要调试 IE 中的标记错误，请首先转到工具>Internet 选项>高级选项卡，选中“始终记录开发人员控制台消息”。保存更改。您还可以使用直接输入法在 validator.w3c.org/nu 使用 w3c 验证器。
@RobParsons - 感谢您的反馈，不幸的是，这些都是最小的 1509 错误（由于 WordPress 所见即所得的默认处理方式，重复的
标签）。由于缺少“forwards”的动画填充模式属性，我最终隔离并解决了这个问题。
感谢 joey 对您的 Wordpress 编辑器和您找到的解决方案的反馈。当我看到标记错误时，我立即怀疑您根本没有使用 f12 工具来尝试调试您的页面。

标签： css internet-explorer internet-explorer-11 css-animations

【解决方案1】：

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

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

【讨论】：