我一直在调查在 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 中低于其他浏览器的动画，导致动画元素从它(错误地)结束的地方(动画)“跳起来”到它需要的地方 完成。
可以在以下网址中看到类似的演示:https://chemonics.com/region/
最佳答案
我已经通过隔离问题解决了这个问题，因为“forwards”的 animation-fill-mode 属性不存在。这导致动画(仅为动画定义了 0% 关键帧)通过继承元素初始状态(在动画之前)的样式结束(在 100%)。对于更现代的浏览器，它们会“填补空白”，而对于 IE11，它会在空白之间跳跃。
https://drafts.csswg.org/css-animations-1/#valdef-animation-fill-mode-forwards
关于css - 翻译在 IE11 上表现异常的动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51047862/