Плохие переходы являются результатом исправления сглаживания

Question

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

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

http://jsfiddle.net/CRc9d/

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

http://jsfiddle.net/JMgxC/

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

Фон :

Вот скрипка, показывающая переход, который при наведении вызывает сглаживание во входном заполнителе: http://jsfiddle.net/EJUhd/

Answer 1

На этот вопрос Стив Адамс ответил на другой вопрос . Мне просто нужно было изменить мой синтаксис -moz:

От ...

-moz-transition-property: rotate;
-moz-transition-duration: .17s;
-moz-transition-timing-function: linear;

Для того, чтобы ...

-moz-transition: -moz-transform 0.17s linear;

Answer 2

Второй jsfiddle вообще не переносится, потому что объявление -webkit-transition-duration: .17s, .17s translate3d(0,0,0); недопустимо.

Если вы хотите сглаживать первый пример, просто добавьте -webkit-box-shadow: 0 0 1px transparent; в поле, и он сгорит с анимацией. Последняя версия Chrome не нуждается в этом хаке.

http://jsfiddle.net/CWFLN/

Вот еще один пример, иллюстрирующий проблему / решение:

http://jsfiddle.net/fKq8y/