JSFiddle - React, Tailwind, and code Playground

https://raw.githubusercontent.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js

by basti1012

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquerykeyframes/0.0.9/jquery.keyframes.min.js"></script>
<div id="load" class="load"> </div>

JavaScript

var zeit=0.2;
var wurfel=50;




  for (a = 1; a <= 80; a++) {


document.getElementById('load').innerHTML += '<div id="lauf'+a+'"  class="lauf"style="position: absolute;border: 1 solid black;margin: 0;width: '+wurfel+'px;height: '+wurfel+'px;borderRadius:0%;"></div>'

  }




  
  

var breite =$(window).width();
var hohe =$(window).height();
 
e=breite/100;
f=hohe/e;//prozent hohe
console.log(breite+'-'+hohe)
 console.log(e+'-'+f)
 
 k=breite/50;
g=k.toFixed(0);//menge wurfel

p=hohe/50;
h=p.toFixed(0);// menge hohe
var allewurfel=g*2+h*2;
 
secbreite=g*zeit;
sechohe=h*zeit;
zeitalles=secbreite*2+sechohe*2;// kompltett zeit
var j=zeitalles.toFixed(3)
 
 console.log(secbreite+'-'+sechohe)
 var bb=breite-wurfel;
var hh=hohe-wurfel;

var proobenseite=hh+bb;//oben und seite gleich 100 prozent
var prohunder =proobenseite/100;
var untenpro=bb/prohunder/2;
var seitepro=hh/prohunder/2;

 var oo=untenpro.toFixed(2);
var ss=seitepro.toFixed(2);




  $(".lauf").playKeyframe({
name: 'spin',
duration:j+'s',
  timingFunction: 'linear',
//fillMode: 'running', 

iterationCount:'infinite'}); 



  for (i = 1; i <= allewurfel; i++) {
  var ia=i*zeit;
    $("#lauf" + i).css("animation-delay", ia + "s");
  }
 
 
 
 var o0='25%';//25%
 var o1=50;//50%
var o2=75;//75%
var o3=100;//100%
 
$.keyframe.define([{
       name:'spin',
       '0%':{
       'top':'0px',
       'background-color':'red',
       'left':'0px'
   },
       
     '25%': {
     'background-color': 'yellow',
     'top': '0px',
     'left': bb+'px',
   },
 
     '50%': {
     'background-color': 'blue',
     'top': hh+'px',
     'left': bb+'px',
   },
       
 
      '75%': {
    'top':hh+'px',
    'background-color':'green',
    'left':'0px'},  
 
    
 '100%': {
        'top':'0px',
    'background-color':'red',
    'left':'0px'}, 
    }]);