javascript - 如何在 HTML 网页上同步多个动画 PNG 图像？

Question

两个动画 PNG 图像在 HTML 网页的 CSS 中作为 background-images 加载，请参见下面的代码。每个图像每秒动画一帧，并循环播放。

问题是，两个动画 PNG 图像加载的时间略有不同，因此动画开始的时间不同，看起来不同步。

问题:如何让两个动画 PNG 图像在页面加载后同时开始动画，以便在每个图像的帧发生变化时两个图像同步显示？

---

HTML

<div class="car"> ... </div>
<div class="bus"> ... </div>

CSS

.car {
  background-image: url('car.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 400px 200px;
}

.bus {
  background-image: url('bus.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 600px 300px;
}

Answer 1

您无法控制图像中加载动画的时间。如果您的动画无法组合成单个图像，则必须在客户端执行动画。