JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: black;
  animation: w-100-200 .5s linear infinite;
}

@keyframes w-100-200 {
    0% { width: 200px; }
   50% { width: 400px; }
  100% { width: 200px; }
}

JavaScript

var div = document.querySelector('div');

div.addEventListener('click', function () {
  requestAnimationFrame(function () {
    var t = new Date;
    t.setSeconds(t.getSeconds() + 3);
    while (new Date < t);
    div.style.background = 'red';
  });

  div.style.background = 'green';
});