为什么在文本结尾处使用带有文本的webkit转换结果？

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。

Answer 4

原来你可以用以下方法防止波动：

-webkit-transform: translateZ(0);

http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/