JSFiddle - React, Tailwind, and code Playground

HTML

<div id="animated">
    Start
</div>

CSS

#animated {
    width: 1000px;
    height: 479px;
    
    padding: 5px;
    font: bold 1em arial, sans-serif;
    color: #aaa;
    border: 2px solid #ddd;    
    cursor: pointer;
}

#animated.go {
    background-position: 0 0;
    background-repeat: no-repeat; 
    color: red;  
}

JavaScript

function toDataUrl(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

// Initially load the GIF once, get base64 data
toDataUrl('http://i.imgur.com/U26S2ML.gif',
function(img_base64) {

  var $div = $('#animated');

  // Once loaded, setup out click listener
  function restart_animated_gif() {
    // Set to none, then base64-encoded URL to restart the gif
    $div.css({backgroundImage: "none"});
    console.log(img_base64);
    $div.css({backgroundImage: "url("+img_base64.replace("image/gif","image/gif;rnd="+Math.random())+")"});
  }

  $div.click(function() {
    $div.toggleClass('go');
    
    if ($div.hasClass('go')) {
        restart_animated_gif();
        $div.text('Stop');
    } else {
       $div.css({backgroundImage: "none"});
       $div.text('Start');
    }
  });

});