修复抗锯齿导致转换不良

Question

在上一个问题中，我想出了如何修复元素悬停时使用CSS3过渡旋转元素所导致的抗锯齿。但是，该修复已经改变了转变。在修复之前，从开始到结束的过渡是顺利的。自修复以来，过渡变得非常僵化。 （值得注意的是，使用Firefox时转换从未如此平稳，但在使用抗锯齿修复之前使用Safari或Chrome。）

这是我最初使用的代码。如果您使用的是Chrome或Safari，请注意当您将鼠标悬停在框上时的转换：

http://jsfiddle.net/CRc9d/

以下是修复抗锯齿的代码：

http://jsfiddle.net/JMgxC/

有没有办法协调第二个代码，以便保留抗锯齿修复，但也提供了更清晰的过渡？

背景：

这是一个小提示，显示转换，当悬停时，会在输入占位符中导致消除锯齿：http://jsfiddle.net/EJUhd/

Answer 1

Steve Adams在another question回答了这个问题。我只需要更改我的-moz语法：

...从

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

要...

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

Answer 2

第二个jsfiddle根本没有转换，因为声明-webkit-transition-duration: .17s, .17s translate3d(0,0,0);无效。

如果你想对第一个例子进行抗锯齿处理，只需在框中添加-webkit-box-shadow: 0 0 1px transparent;，它就会对动画产生抗锯齿效果。最新版本的Chrome不需要这个黑客。

http://jsfiddle.net/CWFLN/

这是另一个说明问题/解决方案的例子：

http://jsfiddle.net/fKq8y/