Question

我尝试将我的关键帧放在CSS的顶部，而不是在媒体查询，http-equiv设置为IE = Edge等。

这是在网站加载过程中使用的相当基本的.png图像，下面的fiddle代码中显示了简单的旋转/ y动画。

.loader-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    background-color: #eef0eb;
}
.loader {
    position: absolute;
    height: 50px;
    width: auto;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    -webkit-animation-name: loader-animate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-name: loader-animate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes loader-animate {
    25% {
        -webkit-transform: rotatey(360deg);
        transform: rotatey(360deg);
    }
    50% {
        -webkit-transform: rotatex(360deg);
        transform: rotatex(360deg);
    }
    75% {
        -webkit-transform: rotatey(0deg);
        transform: rotatey(0deg);
    }
    100% {
        -webkit-transform: rotatex(0deg);
        transform: rotatex(0deg);
    }
}
@keyframes loader-animate {
    25% {
        -webkit-transform: rotatey(360deg);
        transform: rotatey(360deg);
    }
    50% {
        -webkit-transform: rotatex(360deg);
        transform: rotatex(360deg);
    }
    75% {
        -webkit-transform: rotatey(0deg);
        transform: rotatey(0deg);
    }
    100% {
        -webkit-transform: rotatex(0deg);
        transform: rotatex(0deg);
    }
}

<div class="loader-background">
  <img src="https://s30.postimg.org/7dct7bspd/GTG_FB_Logo.png" class="loader"/>
</div>

在Chrome和FF中完美运行，但在Edge和IE11中无效。

Answer 1

只需使用旋转（..）动画会有所不同，但它会起作用

Answer 2

好的，所以我自己想一想。您需要在关键帧的每个阶段定义中设置x和y旋转。 Chrome显然在填补空白方面做得更好...... revised fiddle

@-webkit-keyframes loader-animate {
  0% {
    -webkit-transform: rotatex(0deg) rotatey(0deg);
    transform: rotatex(0deg) rotatey(0deg);
  }
  25% {
    -webkit-transform: rotatex(0deg) rotatey(360deg);
    transform: rotatex(0deg) rotatey(360deg);
  }
  50% {
    -webkit-transform: rotatex(360deg) rotatey(360deg);
    transform: rotatex(360deg) rotatey(360deg);
  }
  75% {
    -webkit-transform: rotatex(360deg) rotatey(0deg);
    transform: rotatex(360deg) rotatey(0deg);
  }
  100% {
    -webkit-transform: rotatex(0deg) rotatey(0deg);
    transform: rotatex(0deg) rotatey(0deg);
  }
}
@keyframes loader-animate {
  0% {
    -webkit-transform: rotatex(0deg) rotatey(0deg);
    transform: rotatex(0deg) rotatey(0deg);
  }
  25% {
    -webkit-transform: rotatex(0deg) rotatey(360deg);
    transform: rotatex(0deg) rotatey(360deg);
  }
  50% {
    -webkit-transform: rotatex(360deg) rotatey(360deg);
    transform: rotatex(360deg) rotatey(360deg);
  }
  75% {
    -webkit-transform: rotatex(360deg) rotatey(0deg);
    transform: rotatex(360deg) rotatey(0deg);
  }
  100% {
    -webkit-transform: rotatex(0deg) rotatey(0deg);
    transform: rotatex(0deg) rotatey(0deg);
  }
}

CSS动画在IE11和Edge中无效

2 个答案: