translate3d zwischen 0% und negative% in IE10

Question

Ich habe ein Element, das links und rechts auf die Menge von 50% seiner vollen Breite animieren muss.

ich erreicht habe dies mit dem folgenden (vereinfachte) Markup:

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

und Stil:

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

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

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

Hinweis: Vendor-Präfixe der Kürze halber weggelassen

In IE10, anstatt 50% der Elementbreite zu verschieben, bewegt sich ein kleinerer (beliebiger?) Betrag im negativen, dann der gleiche Betrag im positiven, dann in der Phase der Animation zwischen 80% und 90% , schnappt es auf die volle 50% Entfernung und dann zurück auf 0%.

Ich kann mir vorstellen, dass dies etwas mit dem negativen Prozentsatz zu tun hat, obwohl ich sonst nirgends Informationen darüber finden kann.

Hier ist ein Stift: http://codepen.io/alexcoady/pen/JogPgx

Answer 1

Es IE erscheint 10 einige seltsamen Fehler hat, wenn zwischen zwei Keyframes mit einer Transformation von 0.

Während sicherlich nicht ideal Übergang, wenn Sie für einen fast Null Prozentsatz verwenden zwei Ihrer Keyframes können Sie den gleichen Effekt in IE 10.

Beispiel (Codepen) erreichen:

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

Alternativ könnten Sie den fast-Null-Wert in beiden Keyframes verwenden.

Beispiel (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); 
    } 
} 

Zum Glück scheint dieses Problem in IE behoben wurden 11.