JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<script src="://cdn.rawgit.com/web-animations/web-animations-js/2.1.2/web-animations.js"></script>
<main class="animations-api">
  <div class="dots">
  <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</main>

CSS

/* body {
  display: flex;  
  align-items: center;
  justify-content: center;
} */

.dots {
  margin: 30% 50%;
}

.dot {

  /* margin: 0.5em; */
  width: 1em;
  height: 1em;
  /* background: dodgerblue; */
  border-radius: 50%;
}

body {
  font-size: 0.6em;
}

JavaScript

/* Web animations api */


var colors = ["#ff6699", "#ff9900", "#ffcc00", "#9adb1b", "#00cc66", "#00cccc", "#00ccff", "#6633cc", "#ff66cc"];



//var dot = document.querySelector(".dot");
var dots = document.querySelectorAll(".dot");
for (var i = 0; i < dots.length; ++i) {
  var dot = dots[i];  
  var col = colors[i]; 
  
  
  dot.style.background = col; 
  // KeyFrames for each dot
  var start = (i / dots.length) * 360;
  var frames = [
  {transform: 'rotate(' + start + 'deg) translate(10em)'},        
    {transform: 'rotate(' + (360 - (i * dots.length)) + 'deg) translate(-10em) '},    
    
  ];
  
  // Timings
  var timing = {
    duration: 2500,
    iterations: Infinity,
    direction: 'alternate',
    easing: 'ease-in-out',
  }  
  // Go!
  dot.animate(frames, timing);
}









//for (var i = 0; i < colors.count; i++){
//dots[i] = {background: colors[i];
//}
//}






/* 
dot.animate([
    {'transform': 'translateY(0)'},
    {'transform': 'translateY(-5em)'},
    {'transform': 'translateY(0)'}
  ], 1000); 
  */