当gif结束时，触发另一个gif

Question

所以我有2个GIF文件，它们的长度为3s。其中一个从头开始循环播放，其他gif在第一个循环的顶部进行无缝过渡。

但是为了能够无缝过渡，我需要以某种方式知道第一个gif结束的时间。

我最初的想法之一是使用Sprite，但是要实现巨大的尺寸是不可能的。 同样因为使用setTimeout函数随机按下按钮真的没有帮助吗？

https://codepen.io/redgreentuoli/pen/gOYxWyo

<img src="Comp_9.gif">
<div  class="alt2" > 
<img src="Comp_7.gif">
</div>...
  $( ".btn1" ).click(function() {
    $('.alt2').addClass('alt3');
   setTimeout(function(){
  $('.alt2').removeClass('alt3');
     },3000); //just so it goes baack to origin
    });