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

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

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

---

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

---

以下是它在IE11上不同的动画方式：

---

代码： HTML:

JavaScript（使用jQuery）：

以下是演示链接：

---

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

边缘似乎有缺陷，位置：已修复。假设是

top:0

和

top:auto

之间的切换（与

bottom

属性的情况相同）导致了这种行为

如果必须保持

固定

位置，可以尝试使用

变换

属性设置动画。按如下方式更改规则集：

@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;
}

希望这有帮助。

---

干杯，杰罗恩

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

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%;
  }
}

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

@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;
}