Poor transitions result from fixing anti-aliasing - css

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;

Answer 2

The second jsfiddle is not transitioning at all because the declaration -webkit-transition-duration: .17s, .17s translate3d(0,0,0); isn't valid.
If you want to antialias the first example, just add -webkit-box-shadow: 0 0 1px transparent; to the box and it will antialias with the animation. The latest version of Chrome doesn't need this hack.
http://jsfiddle.net/CWFLN/
Here is another example that illustrates the problem/solution:
http://jsfiddle.net/fKq8y/