IE - CSS动画在动画结束时跳回

Question

我试图在页面的中心设置一个div来制作动画而不会四处移动.div应该在旋转(无限)时向上和向下缩放,同时它位于页面中心的一个位置.它在Firefox和Chrome中做得很好,但在IE11中,div从页面顶部开始,然后动画到需要的位置.动画完成后,div会跳回到顶部并重新开始.

这是演示这个的JSFiddle.请在Chrome和IE中查看,以查看对比度.

这是代码:

@keyframes logosplash {
      0% {transform: translateY(50vh) scale(1.25) rotateZ(-45deg);}
     50% {transform: translateY(50vh) scale(1) rotateZ(135deg);}
    100% {transform: translateY(50vh) scale(1.25) rotateZ(315deg);}
}
.logoSplash {
    animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.logo {
    position: fixed;
    width: 13.5vw;
    height: 13.5vw;
    left: 50%;
    margin-top: calc(-6.75vw - 5px);
    margin-left: calc(-6.75vw - 5px);
    box-shadow: 0px 0px 10px #000, inset 0px 0px 5px #000;
    border-radius: 25px;
    border: 5px solid #fff;
    transform: translateY(50vh) scale(0.6) rotateZ(-45deg);
    z-index: 1002;
}
<div class="logo logoSplash"></div>

Answer 1

这是因为translateY(50vh)IE 中的解释不同。（我不确定具体细节，所以请随时在这里提供帮助。）将其从关键帧中删除并添加到top:50%;，.logo这应该可以解决问题。

似乎translateY(50vh)intransform: translateY(50vh) scale(0.6) rotateZ(-45deg);被忽略了，但我不确定为什么。此外，包含在整个动画中保持不变的属性值是不好的语义：它完全是多余的。