Анимация CSS3 с преобразованием вызывает размытые элементы на Webkit

Итак, у меня есть некоторые нативные элементы (div s) с различными эффектами, применяемыми к ним (border-radius, box-shadow и transform: scale()). Когда я их оживляю, происходят две странные вещи:

Хотя я не пытаюсь оживить масштаб, если я не ставил масштаб в анимации, он игнорируется.
Когда я помещаю масштаб в анимацию, Webkit стирает элементы

См. пример здесь: http://jsfiddle.net/trolleymusic/RHeCL/ - кнопки внизу будут вызывать проблемы.

Первая проблема также возникает в Firefox, поэтому я предполагаю, что это связано с тем, как должна работать спецификация анимации. Не то, что я хотел, но хорошо, я буду жить с ним.

Вторая проблема просто странная. Я знаю, что это связано с 3D-преобразованием, потому что если я (только для целей тестирования) объявляет -webkit-perspective или -webkit-transform-style: preserve-3d; для элементов окружности, это также вызывает проблему размытия. Моя путаница в том, что я не пытаюсь преобразовать индекс z как все, и я также пробовал анимацию, используя чисто translateY вместо translate.

Это происходит в Chrome (18), Chrome Canary (20) и Safari (5.1.2 и 5.1.4).

Итак, я прав в том, что я думаю, что происходит? И как я могу избежать размытости?

В худшем случае: я могу использовать разные размеры для элементов вместо их масштабирования, что на самом деле не проблема, но я подумал, что это будет более элегантное решение, и теперь эта проблема возникла.

Ответ 1

Обратите внимание на этот ответ, почему он размывает элемент: fooobar.com/questions/74549/...

Резюме выше: WebKit берет исходный размер /CSS перед анимацией и рассматривает его как изображение, THEN масштабирует его, создавая размытость.

Решение: Сделайте начальный размер крупнейшего масштаба, который вы собираетесь, и начните сначала с более низкой шкалы (так что в вашем случае вы хотите увеличить размер на 5 и установить начальная шкала до 0,2)

UPDATE

Причина, по которой он игнорирует текущий масштаб, из того, что я понимаю, состоит в том, что вы специально не устанавливаете JUST the translate (сейчас я ищу CSS для него). Когда вы запустите -webkit-animation, он сбросит все ваши текущие преобразования (масштаб), поэтому вам нужно убедиться, что у вас есть свои весы. Я ищу css для изменения, поэтому он меняет только положение:

Ответ 2

Лучший способ, которым я нашел, - дождаться завершения анимации, затем применить преобразования непосредственно к элементу и удалить класс анимации. Что-то вроде этого работает для меня, не производя никаких сбоев:

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
});

Я использую другую библиотеку, чем jQuery, но вы получаете эту идею.