title: IE - CSS Animation jumps back at end of animation
body: <p>I am trying to get a div to animate at the center of the page without moving around. The div is supposed to scale up and down while rotating (infinitely), all while it sits in one place at the center of the page. It does this just fine in Firefox and Chrome, but in IE11 the div starts at the top of the page and then animates down to where it needs to be. Once the animation completes, the div jumps back up to the top and starts over.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/WCC2K/24/" rel="noreferrer">JSFiddle</a> that demonstrates this. Please view it in both Chrome and IE to see the contrast.</p>
  
  <p><strong>Here is the code:</strong></p>
  
  <pre><code>@keyframes logosplash {
        0% {transform: translateY(50vh) scale(1.25) rotateZ(-45deg);}
       50% {transform: translateY(50vh) scale(1) rotateZ(135deg);}
      100% {transform: translateY(50vh) scale(1.25) rotateZ(315deg);}
  }
  .logoSplash {
      animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
      -webkit-animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
  }
  .logo {
      position: fixed;
      width: 13.5vw;
      height: 13.5vw;
      left: 50%;
      margin-top: calc(-6.75vw - 5px);
      margin-left: calc(-6.75vw - 5px);
      box-shadow: 0px 0px 10px #000, inset 0px 0px 5px #000;
      border-radius: 25px;
      border: 5px solid #fff;
      transform: translateY(50vh) scale(0.6) rotateZ(-45deg);
      z-index: 1002;
  }
  &lt;div class="logo logoSplash"&gt;&lt;/div&gt;
  </code></pre>