请参阅以下内容：http: //jsfiddle.net/2Vdef/1/
当您将鼠标移到 div 上时，文本会显示动画，但在结尾处有一个非常不吸引人的 opacity:1。为什么这么突然？这怎么能顺利呢？谢谢
问问题
1671 次
4 回答
4
我遇到了同样的问题，虽然这个解决方案在我的情况下不起作用，但在你的情况下起作用。
添加背面可见性。
-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/
于 2012-09-03T15:49:53.123 回答
2
在我看来，在 Chrome 和 FF Win 7 / OS X 上看起来不错，但在 IE 上当然没有逐渐的不透明度变化。对于所有浏览器，您可以尝试使用 jQuery 实现相同的效果，并根据需要调整动画速度。http://jsfiddle.net/2Vdef/8/
于 2012-08-30T23:23:11.813 回答
1
尝试改变这个：
-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。
于 2012-08-30T23:58:55.717 回答
1
事实证明，您可以通过以下方式防止波动：
-webkit-transform: translateZ(0);
http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/
于 2012-08-31T00:40:58.927 回答