JSFiddle - React, Tailwind, and code Playground

by chriscauley

CSS

body div { top: 200px; }
div {
  background: rgba(255,100,100,.5);
  height: 50%;
  -webkit-transform-origin: center left;
  position: absolute;
  width: 50%;
}

div > div {
  left: 100%;
  top: 25%;
}/*
div > div:first-child {
  -webkit-transform: rotate(10deg);
}

div > div:last-child {
  -webkit-transform: rotate(-10deg);
}*/
div:before {
  border: 1px black solid;
  border-radius: 100%;
  content:"";
  display: inline-block;
  left: 95%;
  position: absolute;
  top: 45%;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 4s;
}
div:after {
  background: black;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}
div > div {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: rotater;
  -webkit-animation-iteration-count: 1000;
  -webkit-animation-direction: alternate;
}
div > div:first-child { -webkit-animation-duration: 5s; }
@-webkit-keyframes rotater {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(500deg); }
}
@-webkit-keyframes grow {
  from { -webkit-filter: hue-rotate(0deg); width: 0; height: 0; }
  to { -webkit-filter: hue-rotate(360deg); width: 50%; height: 50%; }
}

JavaScript

var html = "<div></div>";
for (var i=0;i<5;i++) {
  html = "<div>"+html+html+"</div>";
}
document.body.innerHTML = html;