IE-CSS анимация переходит обратно в конце анимации

Я пытаюсь заставить 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>
1 5
css animation keyframe

1 ответ:

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

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

2