幻灯片动画在Firefox中运行良好但在chrome中断断续续
我正在建立一个网站，当你点击另一个位于页面左侧，顶部或右侧的div的按钮时，如果将中心div推出屏幕。
左，上和右div将使用jquery ajax加载，并使用css3进行动画处理。
这是我正在谈论的页面：
http://www.uvm.edu/~areid/homesite/index.html
尝试在Chrome和Firefox中单击左眼。 你会看到Firefox中的动画很流畅但是在chrome中断断续续。
有谁知道为什么会发生这种情况？
我也想知道是否有人知道我如何可能加速网站/使过渡看起来更顺畅。
感谢你们的帮助
最好，
凯蒂
我可以清楚地看到Chrome中的混蛋。
如果您在浏览器中执行许多其他操作，CSS3动画不一定能够顺利运行。 它们运行的顺畅程度取决于您在同一时间尝试做什么，以及浏览器中的内部实现如何处理。
根据我使用CSS3过渡的CSS3幻灯片的经验，允许它们顺利运行的最佳方式是在你希望动画平稳运行的同时不要对你的代码做大量的事情。 以下是一些最大化顺利运行机会的方法：
- 预加载动画期间可能需要的资源。
- 在动画运行期间不要踢任何javascript函数。
- 避免在动画期间加载图像。
- 对于想要在动画后运行的事物，通过动画的完成function触发它们的操作（因此它们在动画完成之前不会启动）。
- 如果您想在动画完成时构建并准备好内容，请在开始动画之前先构建它并将其隐藏起来，然后在开始动画之前准备好。
- 不要在动画期间修改DOM（除了专门为动画所需的内容）。
更具体地说，在您的页面中，我看到幻灯片转换中的急动，但在滑动的同时，我看到浏览器尝试加载幻灯片期间显示的新内容。 加载和显示新内容可能会导致幻灯片转换的急动。 我建议您等到幻灯片完成后开始加载新内容，或者在开始幻灯片之前预先加载新内容。 我发现有些浏览器在CSS3过渡中变得不稳定，即使浏览器只是通过网络加载图像。