When gif is ended trigger another gif

Question

So I have 2 gifs that are 3s long. One of them is looped from the start, and other gif goes on top of the first one to make a seamless transition.

But to be able to have a seamless transition, I need to somehow know when the first gif ends.

One of the first ideas that I had, is using sprites, but the giant size that it would make is impossible. Also because the button pressing is random using setTimeout function wouldn't really help?

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
    });