JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>

CSS

body {
  margin: 0;
  background: black;
}
*{
  box-sizing: border-box;
}
div.box {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  background: white;
  transition: 10s;
  animation: a .1s infinite;
}
@keyframes a {
  50% {
    transform : scale(1.2) skew(20deg);
    background: yellow;
    box-shadow: 0 0 120px white;
  }
  80% {
     transform : scale(1.2) skew(-20deg);
     box-shadow: 0 0 20px white;
  }
  100% {
    transform : scale(1);
  }
}

JavaScript

var a = document.querySelectorAll('.box');


function fadeOut(a){
	for(var i = 0; i < a.length; i++){
  		a[i].style.opacity = '0.3';
  }
}
fadeOut(a);