title: CSS animation not working in IE11 and Edge
body: <p>I have tried putting my keyframes at the top of my CSS, not in the media query, http-equiv set to IE=Edge, etc.</p>
  
  <p>It's a fairly basic .png image used during website load with simple rotate/y animation shown in this <a href="https://jsfiddle.net/N4Design/d4v0uw36/15/" rel="nofollow noreferrer">fiddle</a> code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.loader-background {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 99999999;
      background-color: #eef0eb;
  }
  .loader {
      position: absolute;
      height: 50px;
      width: auto;
      top: calc(50% - 25px);
      left: calc(50% - 25px);
      -webkit-animation-name: loader-animate;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      animation-name: loader-animate;
      animation-duration: 5s;
      animation-iteration-count: infinite;
  }
  @-webkit-keyframes loader-animate {
      25% {
          -webkit-transform: rotatey(360deg);
          transform: rotatey(360deg);
      }
      50% {
          -webkit-transform: rotatex(360deg);
          transform: rotatex(360deg);
      }
      75% {
          -webkit-transform: rotatey(0deg);
          transform: rotatey(0deg);
      }
      100% {
          -webkit-transform: rotatex(0deg);
          transform: rotatex(0deg);
      }
  }
  @keyframes loader-animate {
      25% {
          -webkit-transform: rotatey(360deg);
          transform: rotatey(360deg);
      }
      50% {
          -webkit-transform: rotatex(360deg);
          transform: rotatex(360deg);
      }
      75% {
          -webkit-transform: rotatey(0deg);
          transform: rotatey(0deg);
      }
      100% {
          -webkit-transform: rotatex(0deg);
          transform: rotatex(0deg);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loader-background"&gt;
    &lt;img src="https://s30.postimg.org/7dct7bspd/GTG_FB_Logo.png" class="loader"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Works perfectly in Chrome and FF but not in Edge and IE11.</p>