JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<button onclick="kill();">kill 2sec</button>

<div class="item item-1">
  <div class="red"></div>
</div>

CSS

.red {
  background: red;
  width: 30px;
  height: 30px;
}

.stage {
  position: absolute;
  top: 40px;
  left: 100px;
  border: 1px solid black;

  width: 200px;
  height: 200px;
  overflow: hidden;
}

.item {
 position: absolute;
  width: 200px;
  text-align: center;
  opacity: 0;
}

.item-1 {
  animation: 4s go-and-hide linear 0s infinite;
}

.item-2 {
  //animation: 9s go-and-hide linear 3s infinite;
}

.item-3 {
  //animation: 9s go-and-hide linear 6s infinite;
}


@keyframes go-and-hide {
  from {opacity: 0; transform: translate3d(-100px, 0, 0);}
  to {opacity: 1; transform: translate3d(100px, 0, 0);}
}

JavaScript

window.kill = function() {
  var start = +new Date;
  while (+new Date - start < 5000){}
}