Сглаживание при наведении курсора CSS3, предотвращая сглаживание

Question

В предыдущем вопросе я выяснил, как исправить сглаживание, вызванное вращением элемента с помощью переходов CSS3 при наведении элемента. Однако это исправление изменило переход. До исправления переход был плавным от начала до конца. После исправления переход стал очень жестким. (Стоит отметить, что переход никогда не был плавным при использовании Firefox, но в Safari или Chrome это было до исправления сглаживания.)

Вот код, который я использовал изначально. Обратите внимание на переход при наведении курсора на поле, если вы находитесь в Chrome или Safari:

http://jsfiddle.net/CRc9d/

А вот код с исправлением для сглаживания:

http://jsfiddle.net/JMgxC/

Есть ли способ согласовать второй код, чтобы он сохранил исправление сглаживания, но также обеспечил более чистый переход?

Answer 1

Используйте

-moz-transition-property:-moz-transform;

вместо

-moz-transition-property:rotate;

То же самое для -webkit.

Answer 2

Это похоже на проблему переходов, с которой я столкнулся ранее. У меня были плавные переходы при перемещении div слева направо. Решение состояло в том, чтобы все 3 состояния CSS имели левое значение (0px, 300px, 300px). Переходы были плавными с этого момента для Firefox, Chrome, Safari и Opera. В вашем случае вы можете указать начальное значение для перехода, который вы пытаетесь выполнить.