Question

In a previous question I figured out how to fix the anti-aliasing caused by rotating an element using CSS3 transitions when the element is hovered. However, that fix has changed the transition. Before the fix, the transition was smooth from start to finish. Since the fix, the transition has become very rigid. (It’s worth noting that the transition was never smooth when using Firefox, but using Safari or Chrome it was, prior to the anti-aliasing fix.)

Here is the code I used originally. Note the transition when you hover over the box if you are in Chrome or Safari:

http://jsfiddle.net/CRc9d/

And here is the code with the fix for anti-aliasing:

http://jsfiddle.net/JMgxC/

Is there a way to reconcile the second code so that it preserves the anti-aliasing fix but also provides a cleaner transition?

Background:

Here is a fiddle showing the transition that, when hovered, causes anti-aliasing in the input placeholder: http://jsfiddle.net/EJUhd/

Answer 1

This was answered by Steve Adams in another question. I just had to change my -moz syntax:

From…

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

To…

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