Javascript 如何控制gif？

事情是这样的，我有三个GIF，每一个都做动画的一部分

<img src="images/carEnters.gif" id="enter">
<img src="images/carLeaves.gif" id="exit">
<img src="images/tireTracksDissappear.gif" id="delete">

这些GIF将在scrollTop达到某个值时显示，也就是当它们将显示的div位于视口中时。但是，我只希望动画发生一次，这意味着我不希望它重复。然后，如果usar向下滚动，我希望在汽车离开的地方播放gif（也播放一次），完成后，我希望播放最后一个gif。我不知道这是否是可能的，以控制的时刻，他们开始与scrollTop和暂停动画在特定的时间。我试着用它，但对我不起作用

我们的想法是，当你滚动到该区域时，创造出汽车到达的效果，当你离开时，汽车也离开了。如有任何意见或建议，将不胜感激

更新

---

我不能让它只循环一次，因为我的想法是，如果用户滚动后退，汽车应该能够再次进入（或重新启动动画，我不知道是否可以只用一个循环gif完成）。主要问题是。。。如何检测第一个gif何时结束以及如何激活第二个gif。。。如何链接它们使其看起来像单个动画

您可以制作一个不循环但只播放一次的gif:。任何好的图像包（免费或其他）都应该能够做到这一点。也许您可以打开现有的GIF并重新保存它们，而无需循环？

签出此项。与您的问题非常相似。

<img src="images/carEnters.gif" id="enter">
<img src="images/carLeaves.gif" id="exit">
<img src="images/tireTracksDissappear.gif" id="delete">