translate3d between 0% and negative % in IE10

Question

I have an element that needs to animate left and right to the amount of 50% of its full width.

I've accomplished this with the following (simplified) markup:

<div class="wrapper">
  <div class="inner">Inner</div>
</div>

And style:

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.inner {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  animation: MOVE_AROUND 5s infinite;
}

With keyframe animation:

@keyframes MOVE_AROUND {
  0%, 10% { transform: translate3d(0, 0, 0); }
  20%, 40% { transform: translate3d(-50%, 0, 0); }
  60%, 80% { transform: translate3d(50%, 0, 0); }
  90%, 100% { transform: translate3d(0, 0, 0); }
}

Note: Vendor prefixes omitted for brevity

In IE10, instead of moving 50% of the element's width, it moves a smaller (arbitrary?) amount in the negative, then the same amount in the positive, then at the phase of the animation between 80% and 90%, it snaps to the full 50% distance and then back to 0%.

I imagine this has something to do with the negative percentage, though I can't find any information regarding this elsewhere.

Here's a pen: http://codepen.io/alexcoady/pen/JogPgx

Answer 1

It appears IE 10 has some strange bug when transitioning between 2 keyframes with a transform of 0.

While certainly not ideal, if you use an almost-zero percentage for two of your keyframes, you can achieve the same effect in IE 10.

Example (Codepen):

@keyframes MOVE_AROUND_TRANSFORM {
  0% {
    transform: translate3d( 0, 0, 0 );
  }
  10% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
  20%, 40% {
    transform: translate3d( -50%, 0, 0 );
  }
  60%, 80% {
    transform: translate3d( 50%, 0, 0 );
  }
  90% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
  100% {
    transform: translate3d( 0, 0, 0 );
  }
}

Alternately, you could just use the almost-zero value in both the keyframes.

Example (Codepen):

@keyframes MOVE_AROUND_TRANSFORM {
  0%, 10% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
  20%, 40% {
    transform: translate3d( -50%, 0, 0 );
  }
  60%, 80% {
    transform: translate3d( 50%, 0, 0 );
  }
  90%, 100% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
}

Thankfully this issue appears to have been fixed in IE 11.