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

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

1 个答案: