Почему этот элемент перемещается горизонтально (только в IE) во время анимации CSS?

Question

РЕДАКТИРОВАТЬ: Случается на IE10, Win 7

Я использую преобразования, чтобы поместить элемент в горизонтальном направлении и во время анимации, так как я обновления по вертикали с помощью преобразования, я также установить горизонтально по отношению к тому же значению, как и раньше но он движется!

Почему он меняется горизонтально, несмотря на то же значение?

https://jsfiddle.net/kr0qz5b2/2/

HTML:

<div class="p"> 
    <div class="c"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Circle-yellow.svg/1024px-Circle-yellow.svg.png" /> 
    </div> 
</div> 

JavaScript:

document.querySelector("img").onclick = function(event) { 
    event.target.className = "test"; 
} 

CSS:

html, body 
{ 
    height: 100%; 
} 
.p 
{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: block; 
    z-index: 2; 
} 
.c 
{ 
    position: absolute; 
    left: 0; 
    top: 0%; 
    height: 20%; 
    width: 50%; 
    text-align: center; 
    display: block; 
} 

.c img 
{ 
     position: absolute; 
     top: 35%; 
     left: 50%; 
     -webkit-transform: translate(-50%,0em) perspective(1px); 
     -ms-transform: translate(-50%,0em) perspective(1px); 
     transform: translate(-50%,0em) perspective(1px); 
     height: 40%; 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
} 

@keyframes test 
{ 
    0%, 50%, 100% 
    { 
    transform: translate(-50%,0em); 
    -webkit-transform: translate(-50%,0em); 
    -moz-transform: translate(-50%,0em); 
    } 

    25% 
    { 
    transform: translate(-50%,-.5em); 
    -webkit-transform: translate(-50%,-.5em); 
    -moz-transform: translate(-50%,-.5em); 
    } 

    75% 
    { 
    transform: translate(-50%,.5em); 
    -webkit-transform: translate(-50%,.5em); 
    -moz-transform: translate(-50%,.5em); 
    } 
} 

.c img.test 
{ 
    -webkit-animation-name: test; 
    -moz-animation-name: test; 
    animation-name: test; 
    -webkit-animation-duration: 400ms; 
    -moz-animation-duration: 400ms; 
    animation-duration: 400ms; 
    -webkit-animation-iteration-count: 3; 
    -moz-animation-iteration-count: 3; 
    animation-iteration-count: 3; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-fill-mode: none; 
    -moz-animation-fill-mode: none; 
    animation-fill-mode: none; 
} 

Answer 1

Удалите неиспользуемые perspective преобразования на .c img, чтобы исправить анимацию.

-webkit-transform: translate(-50%,0em) perspective($perspective); 
-ms-transform: translate(-50%,0em) perspective($perspective); 
transform: translate(-50%,0em) perspective($perspective); 

становится:

-webkit-transform: translate(-50%,0em); 
-ms-transform: translate(-50%,0em); 
transform: translate(-50%,0em); 

Answer 2

Как отметил @JonUleis, оказывается, что есть ошибка в IE 10 (на Win 7), где анимация с несколькими итераций имеет доли секунды Отключение СОС стили элементов между итерациями. Это может привести к появлению бликов и нечетных движений.

Единственное решение - сделать 1 итерацию и использовать проценты для имитации нескольких итераций. Это означает, что вы не можете сделать это бесконечно

https://jsfiddle.net/kr0qz5b2/17/

@keyframes test 
{ 
    0%, 22%, 44%, 66%, 88% 
    { 
    transform: translate(-50%,0em); 
    -webkit-transform: translate(-50%,0em); 
    -moz-transform: translate(-50%,0em); 
    } 

    11%, 55% 
    { 
    transform: translate(-50%,-.5em); 
    -webkit-transform: translate(-50%,-.5em); 
    -moz-transform: translate(-50%,-.5em); 
    } 

    33%, 77% 
    { 
    transform: translate(-50%,.5em); 
    -webkit-transform: translate(-50%,.5em); 
    -moz-transform: translate(-50%,.5em); 
    } 
} 

.c img.test 
{ 
    -webkit-transform: translate(-50%,0em); 
    -ms-transform: translate(-50%,0em); 
    transform: translate(-50%,0em); 
    -webkit-animation-name: test; 
    -moz-animation-name: test; 
    animation-name: test; 
    -webkit-animation-duration: 1000ms; 
    -moz-animation-duration: 1000ms; 
    animation-duration: 1000ms; 
    -webkit-animation-iteration-count: 1; 
    -moz-animation-iteration-count: 1; 
    animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
}