translate3d między 0% a ujemną% w IE10

Question

Mam element, który musi animować w lewo i w prawo do wysokości 50% jego pełnej szerokości.

Mam dokonał tego z poniższego (uproszczony) znaczników:

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

i styl:

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

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

animacji klatek kluczowych:

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

Uwaga: przedrostki Vendor pominięto dla zwięzłości

W IE10, zamiast przesuwania 50% szerokości elementu, przesuwa mniejszą (dowolną?) Ilość w negatywie, następnie taką samą ilość w pozytywnym, a następnie w fazie animacji między 80% a 90% , zaskakuje do pełnej odległości 50%, a następnie z powrotem do 0%.

Wyobrażam sobie, że ma to coś wspólnego z ujemnym procentem, chociaż nie mogę znaleźć żadnych informacji na ten temat w innym miejscu.

Oto pióro: http://codepen.io/alexcoady/pen/JogPgx

Answer 1

Wydaje IE 10 ma jakiś dziwny błąd podczas przechodzenia pomiędzy 2 klatek kluczowych z transformacji od 0.

Choć z pewnością nie jest idealny, jeśli używasz prawie zero procent dla dwa swoimi klatkami kluczowymi, można osiągnąć ten sam efekt w IE 10.

Przykład (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); 
    } 
} 

Alternatywnie można użyć wartości niemal zerowej w obu klatkach kluczowych.

Przykład (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); 
    } 
} 

szczęście pojawia się problem ten został rozwiązany w IE 11.