IE - L'animazione CSS salta alla fine dell'animazione

Question

Sto cercando di ottenere un div per animare al centro della pagina senza spostarsi. Il div dovrebbe scalare su e giù durante la rotazione (infinitamente), tutto mentre si trova in un posto al centro della pagina. Lo fa bene in Firefox e Chrome, ma in IE11 il div inizia nella parte superiore della pagina e quindi si anima fino a dove deve essere. Una volta completata l'animazione, il div torna indietro in alto e ricomincia.

Ecco lo JSFiddle che lo dimostra. Si prega di vederlo in entrambi Chrome e IE per vedere il contrasto.

Ecco il codice:

@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

E 'perché il translateY(50vh) viene interpretata in modo diverso in IE. (Non sono sicuro delle specifiche su questo, quindi sentitevi liberi di dare una mano qui.) Rimuovilo dai fotogrammi chiave e aggiungi top:50%; a .logo e questo dovrebbe risolvere il problema.

Sembra che lo translateY(50vh) in transform: translateY(50vh) scale(0.6) rotateZ(-45deg); venga ignorato ma non sono sicuro del perché. Inoltre, è una cattiva semantica includere valori di proprietà che rimangono costanti durante un'animazione: è completamente ridondante.