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

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

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

http://jsfiddle.net/CRc9d/

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

http://jsfiddle.net/JMgxC/

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

Фон:

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


css antialiasing
person tvalent2    schedule 15.11.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

От...

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

To...

-moz-transition: -moz-transform 0.17s linear;
person tvalent2    schedule 17.11.2011

arrow_upward
0
arrow_downward

Второй 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/

person methodofaction    schedule 15.11.2011
comment
Спасибо, но это все еще вызывает сглаживание. Я добавил еще один jsFiddle к моему вопросу, чтобы выделить переход и сглаживание. - person tvalent2; 16.11.2011
comment
возможно, вы забыли добавить функцию поворота в форму в последней версии jsfiddle. - person methodofaction; 16.11.2011
comment
Я добавил поворот, но это все равно ничего не исправило. - person tvalent2; 16.11.2011