幻灯片动画在Firefox中运行良好但在chrome中断断续续

Question

我正在建立一个网站，当你点击另一个位于页面左侧，顶部或右侧的div的按钮时，如果一个中心div被推出屏幕。

左，上和右div将使用jquery ajax加载，并使用css3进行动画处理。

以下是我要讨论的网页：

http://www.uvm.edu/~areid/homesite/index.html

尝试在Chrome和Firefox中单击左眼。你会看到Firefox中的动画很流畅但是在chrome中断断续续。

有谁知道为什么会这样？

我也想知道是否有人知道我如何能够加速网站/使转换看起来更顺畅。

感谢你们的帮助

最好的，

凯蒂

Answer 1

我可以清楚地看到Chrome中的混蛋。

如果您在浏览器中执行许多其他操作，CSS3动画不一定能够顺利运行。它们运行的​​顺畅程度取决于您在同一时间尝试做什么，以及浏览器中的内部实现如何处理。

根据我使用CSS3过渡的CSS3幻灯片的经验，允许它们顺利运行的最佳方法是在你希望动画平稳运行的同时不要对你的代码做大量工作。以下是一些最大化顺利运行机会的方法：

1. 预加载动画期间可能需要的资源。
2. 在动画运行期间不要使用任何javascript函数。
3. 避免在动画期间加载图像。
4. 对于想要在动画后运行的内容，通过动画的完成功能触发它们的操作（因此它们在动画完成之前不会启动）。
5. 如果你想在动画制作完成后做一些事情并准备就绪，那么在开始动画之前先构建它并让它隐藏起来并准备好开始动画。
6. 请勿在动画期间修改DOM（除了专门为动画设置的内容之外）。

更具体地说，在您的页面中，我看到幻灯片转换中的急动，但在滑动的同时，我看到浏览器尝试加载幻灯片期间显示的新内容。加载和显示新内容可能会导致幻灯片转换的急剧变化。我建议您等到幻灯片完成后开始加载新内容，或者在开始幻灯片之前预先加载新内容。我发现即使浏览器只是通过网络加载图像，一些浏览器在CSS3过渡中也会变得不稳定。