html - 渲染 CSS3 动画时 FPS 下降

Question

我们有一个网页，我们试图在其中显示一个侧边栏。

这应该推动页面增加其右边距，如本例所示。

正如您所看到的，如果在幻灯片图像未更改时打开侧边栏，它比在出现新图像时更流畅。

我们的问题是由幻灯片引起的，因为我们只从一个动画开始，但是在延迟新动画启动后，会出现六个（三个幻灯片和三个文本 div），这使得侧边栏不太流畅。

是否有任何可能的解决方案来防止这种情况发生或使动画和过渡更加流畅？如果可能的话，我不想使用 javascript。