How to reload the gif when exchanged?

I have a div, and I have a gif as a background (a computer entering like a car). This gif is placed when the scrollTop is at specific number... If the user keeps scrolling I switch the background for another gif (the computer leaving). Here is the code for it:

if (($(window).width() > 1700 && vistaEstandar.scrollTop > 4286 && vistaEstandar.scrollTop < 5171) || ($(window).width() > 1700 && document.documentElement.scrollTop > 4286 && document.documentElement.scrollTop < 5171)) {   

            $('#section6').removeClass('monitorEstandarAnimacion');
            $('#section6').addClass('monitorEstandarFinal');
        }
        else
        {
            $('#section6').removeClass('monitorEstandarAnimacion');
            $('#section6').removeClass('monitorEstandarFinal');
        } 

Ok, now, the classes assigned are the ones that contain the backgrounds

.monitorEstandarAnimacion
{
  background: url(../images/estandar/monitorEstandarEntrada.gif?q=) !important;
  background-size: cover !important;
  background-position: bottom !important;
  width: 100%;
}

.monitorEstandarFinal
{
  background: url(../images/estandar/monitorEstandarSalida.gif?q=) !important;
  background-size: cover !important;
  background-position: bottom !important;
  width: 100%;
}

The switching of backgrounds works. However, when I scroll back and the class is added again, the gif should start over, but it doesn't. The background becomes the last frame of the gif automatically. It's like the gif only works one (it only loops once), but I want it to work once (as it was made) everytime the switching occurs