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

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

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

http://jsfiddle.net/CRc9d/

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

http://jsfiddle.net/JMgxC/

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


css css-transitions
person tvalent2    schedule 10.11.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

person user978122    schedule 10.11.2011

arrow_upward
0
arrow_downward

Использовать

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

вместо

-moz-transition-property:rotate;

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

person Henry    schedule 21.06.2012