CSS 动画在 IE11 和 Edge 中不起作用答案

【问题标题】：CSS animation not working in IE11 and EdgeCSS 动画在 IE11 和 Edge 中不起作用
【发布时间】：2017-05-24 08:50:38
【问题描述】：

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

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

.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 中无法正常运行。

【问题讨论】：

这个动画在 Firefox 中也没有任何作用。
@TylerH：它在 FF 中确实“有效”，但并不完美 - 感谢您的更正。我已经更新了共享主机的图片链接，所以你可以看到它，这就是它根本不起作用的原因。图像在 y 轴/垂直方向上旋转，但不在 x 轴/水平方向上旋转
好的，所以我自己想通了。您需要在关键帧的每个阶段定义中设置 x 和 y 旋转。 Chrome 显然在填补空白方面做得更好......revised fiddle.

标签： css css-animations internet-explorer-11 compatibility microsoft-edge

【解决方案1】：

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

【讨论】：

【解决方案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);
  }
}

【讨论】：

所以，下一个问题是它不能完全在移动设备上运行，但这只是将-webkit-perspective: 500px; 添加到 .loader-background 的问题