html - CSS 动画不会在 IE11 上的 iframe 中播放

Question

我目前正在编写一个 HTML5/JS Webapp，它将集成到预先存在的 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;
}

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

slideInLeft 类肯定附加到我要动画的 HTML 元素上，@keyframes 肯定在加载的 CSS 中，但动画仍然不会播放.

以下图片直接来自 IE11 Dev Console:

有什么我想念的吗？

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;
    }