IE11 和 Edge 中奇怪的 CSS3 动画问题答案

【问题标题】：Strange CSS3 animation issue in IE11 and EdgeIE11 和 Edge 中奇怪的 CSS3 动画问题
【发布时间】：2020-01-27 21:08:59
【问题描述】：

我制作了一个 CSS3 动画，它在 Firefox 和 Chrome 中运行良好，但在 IE11 和 Edge 中表现不同。

我无法解决此问题，因为使用 IE 开发人员工具很难调试 CSS3 动画。此问题也出现在 Edge 上（但我认为我的 Edge 版本已过时，因此请尝试仅在 IE11 中重现此问题。修复可能对两者都有效）。

这是我希望动画的外观（适用于 Chrome/Firefox）：

这是它在 IE11 上的不同动画效果：

代码：

HTML：

<div class="block"></div>
<span>click</span>

CSS：

span {
  width: 50px;
  height: 50px;
  background: red;
  font-size: 50px;
}
.block {
  position: fixed;
  height: 0%;
  bottom: 0;
  width: 100%;
  top: auto;
  display: block;
  background-color: #0B0B0B;
  z-index: 99999;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

.animate-up {
    animation-name: overlayEffectUp;
  }


@keyframes overlayEffectUp {
  0% {
    bottom: 0;
    top: auto;
    height: 0%;
  }

  35%,
  65% {
    height: 100%;
  }

  100% {
    bottom: auto;
    top: 0;
    height: 0%;
  }
}

JavaScript（使用 jQuery）：

$('span').on('click', function() {
    $('.block').addClass('animate-up')
})

这里是演示链接：https://jsfiddle.net/zoq9h7xp/3/

请，任何帮助将不胜感激！

【问题讨论】：

我尝试了很多变体，但没有解决 IE 浏览器的问题。这可能是 IE 和 Edge 浏览器中的某种错误。

标签： css internet-explorer css-animations microsoft-edge

【解决方案1】：

Edge 似乎与position: fixed 存在问题。据说top: 0 和top: auto 之间的切换（以及与bottom 属性相同的故事）会导致这种行为。

如果您必须保持fixed 位置，您可以尝试使用transform 属性进行动画处理。更改您的规则集如下：

@keyframes overlayEffectUp {
    0% {
        transform: translateY(100%); // totally offscreen
    }

    35%,
    65% {
        transform: translateY(0%); // totally on screen from bottom
    }

    100% {
        transform: translateY(-100%); // totally off screen again to top
    }
}
.block {
    position: fixed;
    top:0;
    bottom:0;
    transform: translateY(100%);
    width: 100%;
    background-color: #0B0B0B;
    z-index: 99999;
    animation-fill-mode: both;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

希望这会有所帮助。干杯，杰伦

【讨论】：