Translate3d from 0% to negative% in IE10

Question

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

I did 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 prefix omitted for brevity

In IE10, instead of moving 50% of the width of the element, it moves a smaller (arbitrary?) Amount in negative, then the same amount in positive, and then at the stage of animation between 80% and 90%, it binds to the full 50- percentage distance, and then returns to 0%.

I believe this has something to do with the negative percentage, although I cannot find any information about it elsewhere.

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

Answer 1

It looks like IE 10 has a weird error when moving between two keyframes with conversion 0.

Although, of course, not ideal, if you use almost zero percent for your two 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 ); } } 

Alternatively, you can simply use an almost zero value in both 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 ); } } 

Fortunately, this issue seems to have been fixed in IE 11.