CSS 动画无法在 IE11 的 iframe 中播放

Question

我目前正在编写一个 HTML5/JS Web 应用程序，它将集成到预先存在的 HTML 代码中。预先存在的代码包含一个 iframe，然后加载我的 webapp 的 URL。

我的 CSS 文件中设置了以下动画：

@-moz-keyframes peopleSlideLeft {
  0% {
    left: -500px;
  }
  100% {
    left: 0px;
  }
}
@-webkit-keyframes peopleSlideLeft {
  0% {
    left: -500px;
  }
  100% {
    left: 0px;
  }
}
@keyframes peopleSlideLeft {
  0% {
    left: -500px;
  }
  100% {
    left: 0px;
  }
}

.container .left .people-container .people .person.slideInLeft {
  -webkit-animation: peopleSlideLeft 0.75s forwards;
  -moz-animation: peopleSlideLeft 0.75s forwards;
  animation: peopleSlideLeft 0.75s forwards;
}

现在，如果我在自己的 window 中启动我的 webapp，则动画播放没有问题，但是当通过 iframe 加载 webapp 时，动画不会触发（注意：仅此问题出现在 IE11 中。Chrome，Firefox 和 Edge 在 iframe 和 out 中都可以正常工作。

slideInLeft class 肯定附加到我要动画的 HTML 元素，并且 @keyframes 肯定在加载 CSS 中，但是动画还是不会播放。

以下图像直接来自 IE11 开发控制台：

有什么我遗漏的吗？

Answer 1

确保在末尾添加非前缀

 @-moz-keyframes peopleSlideLeft {
      0% {
        left: -500px;
      }
      100% {
        left: 0px;
      }
    }
    @-webkit-keyframes peopleSlideLeft {
      0% {
        left: -500px;
      }
      100% {
        left: 0px;
      }
    }
    @-ms-keyframes peopleSlideLeft {
      0% {
        left: -500px;
      }
      100% {
        left: 0px;
      }
    }
    @keyframes peopleSlideLeft {
      0% {
        left: -500px;
      }
      100% {
        left: 0px;
      }
    }

    .container .left .people-container .people .person.slideInLeft {
      -webkit-animation: peopleSlideLeft 0.75s forwards;
      -moz-animation: peopleSlideLeft 0.75s forwards;
      -ms-animation: peopleSlideLeft 0.75s forwards;
      animation: peopleSlideLeft 0.75s forwards;
    }

Answer 2

所以我后来发现了问题所在。包含加载我的 webapp 的 iframe 的父页面在 head 部分具有以下 meta 标记：

<meta http-equiv="X-UA-Compatible" content="IE=9">

修改为

<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10">

这使得动画成功完成。

CSS 动画无法在 IE11 的 iframe 中播放

CSS Animations won't play inside iframe on IE11

html

css

iframe

internet-explorer-11