translate3d между 0% и отрицательным% в IE10
У меня есть элемент, который нужно анимировать влево и вправо на сумму 50% от его полной ширины.
Я сделал это с помощью следующей (упрощенной) разметки:
<div class="wrapper">
<div class="inner">Inner</div>
</div>
И стиль:
.wrapper {
position: relative;
width: 300px;
height: 200px;
}
.inner {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
animation: MOVE_AROUND 5s infinite;
}
С ключевой анимацией:
@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); }
}
Примечание: префиксы поставщиков для краткости опущены
В IE10 вместо перемещения 50% ширины элемента он перемещает меньшее (произвольное?) Значение в отрицательное значение, затем такое же количество в положительное значение, а затем в фазе анимации между 80% и 90% оно фиксируется на полное расстояние 50%, а затем обратно на 0%.
Я предполагаю, что это как-то связано с отрицательным процентом, хотя я не могу найти информацию об этом в другом месте.
Вот ручка:http://codepen.io/alexcoady/pen/JogPgx