我目前正在编写一个 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:
有什么我想念的吗?
最佳答案
确保在末尾添加非前缀
@-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;
}
关于html - CSS 动画不会在 IE11 上的 iframe 中播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43203609/