html - IE中的翻转动画支持

Question

我正在尝试实现翻转动画。这是示例链接：http ://animista.net/play/basic/flip

这是课程：

.flip-horizontal-bottom {
    -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
            animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}


/**
 * ----------------------------------------
 * animation flip-horizontal-bottom
 * ----------------------------------------
 */
@-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}

它在 Chrome 和 Firefox 中运行良好，但在 IE11 中根本无法运行。我需要进行哪些更改才能使其在 IE 11 中运行？

标签： htmlcssanimation

Answer 1

从他们的“如何”笔记中：

此外，一些动画是实验性的，无论您如何为它们添加前缀，它们都可能无法在旧浏览器中按预期工作。使用您自己的判断或更好的判断 - 咨询超级有用的 caniuse.com 以检查浏览器支持。

此外，据我所知，他们没有提供完整的代码。他们有一个perspective:500px动画舞台包装器（在演示中），这使它一切正常，我没有在下载示例代码的任何地方看到它。

即使在您添加它之后，我也怀疑它是否可以在 IE 中运行，因为它缺乏对 . 的支持，正如此处的答案transform-style:preserve-3d所指出的那样。