出于某种原因,在我的webkit-transform属性动画发生之前,有轻微的闪烁。这就是我在做的事情:
CSS:
#element {
-webkit-transition: -webkit-transform 500ms;
}
JavaScript的:
$("#element").css("-webkit-transform", "translateX(" + value + "px)");
在转换发生之前,有一个闪烁。知道为什么会这样,以及我如何解决这个问题?
谢谢!
更新:这只发生在Safari中。虽然动画确实有效,但Chrome中不会发生这种情况。
答案 0 :(得分:271)
此处提到了解决方案:iPhone WebKit CSS animations cause flicker。
对于您的元素,您需要设置
-webkit-backface-visibility: hidden;
答案 1 :(得分:81)
规则:
-webkit-backface-visibility: hidden;
不适用于精灵或图像背景。
body {-webkit-transform:translate3d(0,0,0);}
搞砸了平铺的背景。
我更喜欢制作一个名为no-flick的课程并执行此操作:
.no-flick{-webkit-transform:translate3d(0,0,0);}
答案 2 :(得分:51)
将此css属性添加到闪烁的元素:
-webkit-transform-style: preserve-3d;
(非常感谢Nathan Hoad:http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)
答案 3 :(得分:17)
我不得不使用:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
元素上的,或者在页面加载后第一次发生转换时我仍会得到一个flickr
答案 4 :(得分:15)
有关更详细的说明,请查看此帖:
http://www.viget.com/inspire/webkit-transform-kill-the-flash/
我肯定会避免将它应用到整个身体。关键是确保您计划在将来转换的任何特定元素开始在3d中渲染,以便浏览器不必切换到渲染模式。添加
-webkit-transform: translateZ(0)
(或已经提及的任何一个选项)到动画元素将完成此任务。
答案 5 :(得分:11)
我发现将-webkit-backface-visibility: hidden;
应用于翻译元素并将-webkit-transform: translate3d(0,0,0);
应用于其所有子元素,然后闪烁消失
答案 6 :(得分:4)
触发有问题元素的硬件加速渲染。我建议不要在*,body或html标签上执行此操作。
.problem{
-webkit-transform:translate3d(0,0,0);
}
答案 7 :(得分:1)
上述两个答案对我来说都有类似的问题。
然而,body {-webkit-transform}方法会导致页面上的所有元素有效地以3D呈现。这不是最糟糕的事情,但它稍微改变了文本和其他CSS样式元素的渲染。
这可能是你想要的效果。如果您在页面上进行 lot 转换,这可能会很有用。否则,-webkit-backface-visibility:隐藏在元素上,您的转换是最少侵入性的选项。