出于某种原因，在我的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：隐藏在元素上，您的转换是最少侵入性的选项。