IE - CSS Анимация возвращается в конце анимации

Question

Я пытаюсь получить div для анимации в центре страницы, не перемещаясь. Предполагается, что div должен масштабироваться вверх и вниз при вращении (бесконечно), все, пока он сидит в одном месте в центре страницы. Это прекрасно работает в Firefox и Chrome, но в IE11 div начинается в верхней части страницы, а затем анимируется до того места, где он должен быть. Как только анимация завершается, div возвращается к вершине и начинается.

Вот JSFiddle, который демонстрирует это. Пожалуйста, просмотрите его как в Chrome, так и в IE, чтобы увидеть контраст.

Вот код:

@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

Это потому, что translateY(50vh) интерпретируется по-разному в IE. (Я не уверен в специфике этого, поэтому не стесняйтесь помогать здесь.) Удалите его из ключевых кадров и добавьте top:50%; в .logo, и это должно устранить проблему.

Похоже, что translateY(50vh) в transform: translateY(50vh) scale(0.6) rotateZ(-45deg); игнорируется, но я не уверен, почему. Кроме того, это плохая семантика, чтобы включить значения свойств, которые остаются неизменными во всей анимации: она полностью избыточна.