小编Mat*_*mes的帖子

我试图在页面的中心设置一个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) …