CSS Animations won't play inside iframe on IE11 - html

Question

I am currently writing a HTML5/JS Webapp which will be integrated into pre-existing HTML code. The pre-existing code contains an iframe which then loads the URL of my webapp.
I have the following animation set up in my CSS file:
#-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;
}
Now if I start my webapp in a window of its own, then the animation plays without issue, however when the webapp is loaded through the iframe, the animation does not fire (Note: This issue only occurs in IE11. Chrome, Firefox and Edge all work correctly both in iframe and out).
The slideInLeft class is definitely attached to the HTML Elements I want to animate, and the #keyframes are definitely in the loaded CSS, but the animation will still not play.
Following images are directly from the IE11 Dev Console:
Is there something I am missing?

Answer 1

Make sure you add non-prefix at the end
#-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

So I have since found out what the issue was. The parent page which contained the iframe that loaded my webapp had the following meta tag in the head section:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Modifying this to be
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10">
Which allowed the animations to complete successfully.