Html CSS动画赢得'；不要在IE11上的iframe内玩

我目前正在编写一个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，那么动画播放不会出现问题，但是当webapp通过iframe加载时，动画不会启动（注意：这个问题只发生在IE11中。Chrome、Firefox和Edge在iframe和out中都能正常工作）

slideInLeft

类肯定会附加到我想要设置动画的HTML元素，而

@关键帧肯定会在加载的CSS中，但动画仍然不会播放

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



是否缺少某些内容？
请确保在末尾添加非前缀

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

确保在末尾添加非前缀

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

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

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



将此修改为

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



这使动画得以成功完成。
因此，我发现了问题所在。包含加载我的webapp的iframe的父页面在
head
部分有以下
meta
标记：

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



将此修改为

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



这使动画得以成功完成。
您指的是没有任何前缀的
@关键帧
和
动画
属性吗？因为我已经有了这些，你可以从我的问题中看到。是的，我的意思是没有前缀。如果您在我的回答中看到，我已经为-ms-animation添加了动画。自从添加以来，动画不需要使用
-ms-
前缀，但是我还是添加了前缀，并且没有解决问题。您是指没有任何前缀的
@关键帧
和
动画
属性吗？因为我已经有了这些，你可以从我的问题中看到。是的，我的意思是没有前缀。如果您在我的回答中看到了，我已经为-ms-animation添加了动画。自从添加以来，动画不需要
-ms-
前缀，但是我还是添加了它，它没有解决问题。