JSFiddle - React, Tailwind, and code Playground

by chriscauley

CSS

body >div { top: 100px; width: 30%; height: 30%; }
div {
  background: rgba(255,100,100,.2);
  height: 70%;
  -webkit-transform-origin: center left;
  position: absolute;
  width: 70%;
}

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

div > div:last-child {
  -webkit-transform: rotate(-10deg);
}*/
div:after {
  background: black;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}
div > div {
  -webkit-animation-duration: 10s;
  -webkit-animation-name: rotater;
  -webkit-animation-iteration-count: 10000;
  -webkit-animation-direction: alternate;
}
div>div:last-child {
    -webkit-animation-name:rotater2;
}

@-webkit-keyframes rotater {
  0% { -webkit-transform: rotate(0deg); }
  20% { -webkit-transform: rotate(90deg); }
  40% { -webkit-transform: rotate(90deg); }
  60% { -webkit-transform: rotate(135deg); }
  80% { -webkit-transform: rotate(135deg); }
  100% { -webkit-transform: rotate(180deg); }
}
@-webkit-keyframes rotater2 {
  0% { -webkit-transform: rotate(0deg); }
  20% { -webkit-transform: rotate(-90deg); }
  40% { -webkit-transform: rotate(-90deg); }
  60% { -webkit-transform: rotate(-135deg); }
  80% { -webkit-transform: rotate(-135deg); }
  100% { -webkit-transform: rotate(-180deg); }
}

JavaScript

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