JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<button>Start</button>

CSS

div {
  width: 100px; height: 100px; background: red;
}

.a {
  animation: a 2s linear, b 2s 2s linear;
}

@keyframes a {
  from { background: red; width: 100px; }
  to { background: blue; width: 200px; }
}

@keyframes b {
  from { background: blue; height: 100px; }
  to { background: black; height: 200px; }
}

JavaScript

$('button').click(function(){
	$('div').addClass('a');
  
  $(this).attr('disabled','true').text('Started');
  
  var n = 0;
  
  var interval = setInterval(function() {
  	$('div').removeClass('a');
    
    if (n === 5) {
    	clearInterval(interval);
    	$('button').removeAttr('disabled').text('Finished | Again');
    } else {
      setTimeout(function() {
      	$('div').addClass('a');
      }, 0)
      n++;
    }
  }, 4500);
});