JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="container"></div>

CSS

.image {
  height: 100px;
  width: 100px;
  background: url("https://nextcommit.github.io/images/logo.png");
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  /*
  transform: translateZ(0);
  */
}

.image.animated {
  -webkit-animation: do-stuff 4s infinite;
  animation: do-stuff 4s infinite;  
  /*
  -webkit-animation: do-accelerated-stuff 4s infinite;
  animation: do-accelerated-stuff 4s infinite;
  */
}

@keyframes do-stuff {
  0% {
    top: 0;
    left: 0;
  }
  
  25% {
    top: 200px;
    left: 200px;
  }
  
  50% {
    top: 0;
    left: 400px;
  }
  
  75% {
    top: 0;
    left: 600px;
  }
}

@keyframes do-accelerated-stuff {
  0% {
    transform: translate(0, 0);
  }
  
  25% {
    transform: translate(200px, 200px);
  }
  
  50% {
    transform: translate(400px, 0);
  }
  
  75% {
    transform: translate(600px, 0);
  }
}

JavaScript

$(document).ready(function() {
	var nrImages = 1000;
  var template = "<div class='image'></div>";
  var templates = Array(nrImages).fill(template).join("");
	$(".container").append(templates);
  
  $(".image").click(function() {
    $(".image").addClass("animated");
  });
});