为什么将webkit-transition与文本一起使用会导致文本在结尾处对齐？

Question

请参阅以下内容：http://jsfiddle.net/2Vdef/1/

当你将鼠标移到div上时，文本会在动画中显示，但在最后有一个非常不吸引人的不透明度:1.为什么这么突然？如何才能让这一切变得顺畅？谢谢

Answer 1

我遇到了同样的问题，虽然这个解决方案在我的情况下不起作用，但在你的情况下可以。

http://jsfiddle.net/2Vdef/13/

添加背面可见性。

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
backface-visibility:         hidden; 

编辑:在我的案例中，解决方案确实是背面-可见性。您只需将其应用于正确的元素。我对a的不透明度进行了动画处理，并假定需要将backface-visbility应用于a。相反，它需要应用于a的容器。

不工作：http://jsfiddle.net/9PmXu/已修复：http://jsfiddle.net/9PmXu/1/

Answer 2

它在Chrome和FF Win 7/ OS X上看起来很好，但在IE上当然没有逐渐的不透明度变化。对于所有浏览器，您可以尝试使用jQuery实现相同的效果，并根据自己的喜好调整动画速度。http://jsfiddle.net/2Vdef/8/

Answer 3

尝试更改此设置：

-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;

要这样做：

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

它只会让你所有的过渡问题都变得更顺利。

另外，来自@Slave的上面的答案也是正确的，但将'200‘改为'600’会让它更流畅一点。答案是正确的，但我的答案是纯CSS。