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

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


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

  }

   
   
 






 $(".lauf").playKeyframe({
name: 'spin',
duration:'40s',
  timingFunction: 'linear',
//fillMode: 'running', 
default: '5',
iterationCount:'infinite'}); 



  for (i = 1; i <= 80; i++) {
  var ia=i*0.5;
    $("#lauf" + i).css("animation-delay", ia + "s");
  }

  
  
  

var breite =$('#load').width();
var hohe =$('#load').height();


 //alert(hohe+'-'+breite)


$.keyframe.define([{
       name:'spin',
       '0%' :   {
       'top':'0px',
       'background-color':'red',
       'left':'0px'
   },
       
      '6%': {
     'background-color': 'gold',
     'top': '0px',
     'left': '400px',
   },
 
      '12%': {
     'background-color': 'lime',
     'top': '400px',
     'left': '400px',
   },
       
      '18%': {
     'background-color': 'blue',
     'top': '400px',
     'left': '0px',
   },
       
    '24%': {
    'top':'50px',
    'background-color':'black',
    'left':'0px'},
    
      '30%': {
    'top':'50px',
    'background-color':'yellow',
    'left':'350px'},  
    
        '36%': {
    'top':'350px',
    'background-color':'green',
    'left':'350px'},   
    
            '42%': {
    'top':'350px',
    'background-color':'blue',
    'left':'50px'},  
    
                '48%': {
    'top':'100px',
    'background-color':'red',
    'left':'50px'}, 
    
                    '54%': {
    'top':'100px',
    'background-color':'orange',
    'left':'300px'}, 
    
                        '60%': {
    'top':'300px',
    'background-color':'lime',
    'left':'300px'}, 
    
                           '66%': {
    'top':'300px',
    'background-color':'yellow',
    'left':'100px'},  
    
                              '72%': {
    'top':'150px',
    'background-color':'grey',
    'left':'100px'},   
    
                            ...