平滑CSS3悬停过渡，同时防止反混叠

Question

在之前的问题中，我弄清楚了如何修复使用CSS3过渡在元素悬停时旋转元素所引起的抗锯齿。然而，这个修正改变了过渡。在修复之前，转换从头到尾都很顺利。自修正以来，转型变得非常僵化。(值得注意的是，在使用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;