logo标签列表

CSS变换动画导致闪烁问题

css
3

我的代码在这里http://jsfiddle.net/JaB5S/

您可以点击蓝色页面来运行动画。

但每当您这样做时，您会看到文本闪烁，直到动画完成。右侧的文本甚至消失了。

我曾经在某个地方读到过backface-visibility: hidden;应该可以解决这个问题，但我已经设置了它，但仍然无法解决。

这是我第一次使用CSS动画，所以任何帮助都将不胜感激。

谢谢！

你可以在jQuery中使用.toggleClass代替if语句。就像这个例子。 - misterManSam
1个回答
3
您需要的是添加。
-webkit-transform-style: preserve-3d;

我已经将代码更新到了#main-container，这是更新后的fiddle示例链接：http://jsfiddle.net/JaB5S/2/

哇，非常感谢！你能解释一下发生了什么以及为什么这样会修复它吗？谢谢！ - Pa3k.m
1
transform-style 属性指定了嵌套元素在 3D 空间中的渲染方式。该属性必须与 transform 属性一起使用。 - valerio0999
1
你也可以在jQuery中使用.toggleClass，而不是使用if语句。就像这个例子。 - misterManSam
@misterManSam 谢谢，伙计！我之前不知道这个。现在我一箭双雕了。 - Pa3k.m
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接