Почему в Chrome, Яндекс Браузер, Opera некорректно работает CSS3 анимация?

Question

[Musgem]

Привет! Экспериментируя с анимацией в CSS столкнулся с глюком.
В Chrome, Яндекс Браузер, Opera некорректно работает анимация.
Пример анимации
Eсли выбрать “Animate 1” По клику, круг расходится в разные стороны, но проблема в том что у круга получаются рваные края! Что самое интересное данная анимация нормально работает в Firefox. Все остальные анимации работают корректно.
В чем может быть проблема? я уже голову сломал...

Answer 1

[tyzberd]

добавьте для класса .my-animate transform: translate(-50%);

Comments

[Musgem]

Супер! заработало как надо.
Объясните если не сложно, что мы этим сделали ? чтоб потом на эти грабли не наступать.
Спасибо.