IE - CSS Animation jumps back at end of animation

Question

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.

Here is the JSFiddle that demonstrates this. Please view it in both Chrome and IE to see the contrast.

Here is the 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;
}
<div class="logo logoSplash"></div>

Answer 1

It's because the translateY(50vh) is being interpreted differently in IE. (I'm not sure on the specifics on this so feel free to help out here.) Remove it from the keyframes and add top:50%; to .logo and that should fix the problem.

It seems like the translateY(50vh) in transform: translateY(50vh) scale(0.6) rotateZ(-45deg); is being ignored but I'm not sure why. Also, it's bad semantics to include property values that remain constant throughout an animation: it's completely redundant.