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:

[![Class is attached to the div](https://i.stack.imgur.com/LhSC9.png)](https://i.stack.imgur.com/LhSC9.png)
[![Keyframes show up in the CSS](https://i.stack.imgur.com/kJxFI.png)](https://i.stack.imgur.com/kJxFI.png)

Is there something I am missing?