Html 渲染CSS3动画时FPS降低

我们有一个网页，我们试图显示一个侧栏

这一个应该推动页面增加其右边距，如中所示

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

我们的问题是由幻灯片造成的，因为我们开始时只有一个动画，但经过一段时间的延迟后，新的动画开始启动，变成了六个（三个幻灯片和三个文本分割），这使得侧栏的流动性降低

---

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

页面上的“动画”越多，FPS越低，因为这会对浏览器造成负担。另外，我认为JS动画可以更好地实现这一点。不，问题是图像的大小。如果拿出幻灯片，过渡看起来很好。但是当你强制多个巨大的图像同时调整大小时，它看起来会很不稳定。我会考虑保持它们的大小不变，而不是100%。