css变换动画导致闪烁 [英] css-transform animation causing to flickering

问题描述

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

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

You can click the blue page to run the animation.

但是无论什么时候，你都可以看到文本闪烁，直到动画已经完成了。

But whenever you do though, you can see the texts flickering until the animation is done. The text on the right side even disappears.

我在某处阅读了 backface-visibility：hidden; 解决问题，但我已经有，但仍然无法修复它。

I've read somewhere that backface-visibility: hidden; should solve the problem, but I already have it but still cant fix it.

这是我第一次使用css动画，所以任何帮助将非常感谢。

This is my first time working with css animations so any help would be very much appreciated.

感谢！

推荐答案

您需要的是添加

-webkit-transform-style: preserve-3d;

至＃main-container 您的小提琴： http://jsfiddle.net/JaB5S/2/

这篇关于css变换动画导致闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！