平滑CSS3懸停過渡，同時防止消除鋸齒

Question

在previous question我想出瞭如何修復在元素被徘徊時使用CSS3轉換旋轉元素引起的抗鋸齒。但是，該修復改變了過渡。在修復之前，過渡從始至終都很順利。自修復以來，轉型變得非常僵化。 （值得注意的是，在使用Firefox時，使用Firefox時過渡不會順利，但在反鋸齒修復之前使用Safari或Chrome）。

以下是我最初使用的代碼。需要注意的過渡，當你將鼠標懸停在框，如果你是在Chrome或Safari：

http://jsfiddle.net/CRc9d/

這裏是與固定的抗鋸齒代碼：

http://jsfiddle.net/JMgxC/

有一種調和第二個代碼的方法，以便它保留反鋸齒修復但還提供了一個更清晰的轉換？

Answer 1

這聽起來與我之前遇到的轉換問題類似。從左到右移動div時，我的轉換並不順暢。解決方案是確保所有3個CSS狀態都有左值（0px，300px，300px）。從那時起，Firefox，Chrome，Safari和Opera的轉換順利進行。在你的情況下，你可能想爲你正在嘗試的轉換指定一個初始值。使用

Answer 2

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

代替

-moz-transition-property:rotate; 

同上，用於-webkit。