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，这应该可以解决问题。

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

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

IE - CSS Animation jumps back at end of animation

css

animation

internet-explorer

keyframe