Why does this element move horizontally (only in IE) during CSS animation?

Question

EDIT: Happens on IE10, Win 7

I'm using transform to place the element horizontally and during animation, since I'm updating the vertical using transform, I also set horizontal to the same value as before but it moves!

Why is it changing horizontal despite the same value?

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

As pointed out by @JonUleis, it appears there's a bug in IE 10 (on Win 7) where an animation with multiple iterations has a split-second unsetting of the element's styles between the iterations. This can cause blips and odd movements.

The only solution is to do 1 iteration and use the percentages to simulate multiple iterations. This does mean you cannot do it infinitely

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;
}

Answer 2

Remove the unused perspective transform on .c img to fix the animation.

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

Becomes:

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