Как сделать анимацию вращения (CSS3) одинаковой в Chrome и Firefox?

Question

[Павел Китьян]

Вот пример: jsfiddle.net/kityan/3LGYZ

Углы поворота: 0 -100 400.
Firefox и IE ведут себя одинаково: поворот против часовой на -100 и затем в положение 40 по часовой.
Несмотря на то, что 400 включает полный оборот, этого не происходит.
Chrome делает полный оборот как надо!

Разница, видимо, в двух вещах: от какого положения они считают матрицу трансформации - это применительно к самой трансформации. А еще и в самой анимации - учитывать ли при вращении полные обороты или нет... Или дело только в анимации?

Это как-то можно привести к кроссбраузерному виду средствами CSS3?

P.S. И вопрос вдогонку: почему без перезагрузки второй раз анимацию применить нельзя?

Answer 1

[Евгений Низамиев]

Уберите scale(0.5) из строчки.
Надо записать или через запятую или вынести на новую строчку

Comments

[Павел Китьян]

Вот это да. А почему же тогда не игнорируется Firefox-ом вообще?
@RadiationX, Спасибо!
А по поводу P.S. - непонятно? Никогда раньше не использовал анимации именно CSS3.