IE - CSS-Animation springt am Ende der Animation zurück

Question

Ich versuche, ein Div in der Mitte der Seite zu animieren, ohne sich zu bewegen. Das Div soll während des Drehens (unendlich) auf und ab skalieren, während es an einer Stelle in der Mitte der Seite sitzt. In Firefox und Chrome funktioniert das ganz gut, aber in IE11 beginnt das div am Anfang der Seite und animiert dann dorthin, wo es sein muss. Sobald die Animation abgeschlossen ist, springt das Div nach oben und beginnt von vorne.

Hier ist die JSFiddle, die dies demonstriert. Bitte sehen Sie es sowohl in Chrome als auch in IE an, um den Kontrast zu sehen. Hier

ist der 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

Es ist, weil die translateY(50vh) anders in IE interpretiert wird. (Ich bin mir nicht sicher, auf die Einzelheiten in diesem Thema, so fühlen Sie sich frei, hier zu helfen.) Entfernen Sie es aus den Keyframes und fügen Sie top:50%; zu .logo und das sollte das Problem beheben.

Es scheint wie die translateY(50vh) in transform: translateY(50vh) scale(0.6) rotateZ(-45deg); wird ignoriert, aber ich bin mir nicht sicher warum. Außerdem ist es eine schlechte Semantik, Eigenschaftswerte einzuschließen, die während einer Animation konstant bleiben: Sie ist vollständig redundant.