由于修正了反混叠，导致了很差的过渡。

Question

在前面的一个问题中，我想出了如何解决在元素悬停时使用CSS3转换旋转元素所引起的反混叠问题。然而，这一修正改变了转换过程。在修复之前，从开始到完成过渡是平稳的。自修复以来，过渡变得非常僵化。(值得注意的是，在使用Firefox时，过渡从来都不是一帆风顺的，但在使用抗混叠修复之前，使用Safari或Chrome是不顺利的。)

这是我最初使用的代码。如果您使用的是Chrome或Safari，请注意在框上悬停时的过渡：

http://jsfiddle.net/CRc9d/

下面是具有抗混叠修复的代码：

http://jsfiddle.net/JMgxC/

是否有办法调和第二个代码，使其保持抗混叠修复，但也提供了一个更干净的过渡？

背景

这里有一个小提琴，显示了当在输入占位符中悬停时会导致反混叠的转换：http://jsfiddle.net/EJUhd/。

Answer 1

史蒂夫亚当斯在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

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

如果您想要反别名的第一个例子，只要添加-webkit-box-shadow: 0 0 1px transparent;到框，它将反别名的动画。最新版本的Chrome不需要这种黑客攻击。

http://jsfiddle.net/CWFLN/

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

http://jsfiddle.net/fKq8y/