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

我试图让一个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>

最佳答案

这是因为translateY(50vh)在ie中的解释不同（我不确定具体细节，所以请在这里提供帮助。）将其从关键帧中移除并将top:50%;添加到.logo中，这应该可以解决问题。
似乎translateY(50vh)中的transform: translateY(50vh) scale(0.6) rotateZ(-45deg);被忽略了，但我不知道为什么。此外，包含在整个动画中保持不变的属性值是错误的语义：它完全是多余的。