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; }
  to { background: blue; }
}

@keyframes b {
  from { background: blue; }
  to { background: black; }
}

JavaScript

var iteration = 0;
var n = 3;


$('div').on('animationend', function (data) {
 if (data.originalEvent.animationName === 'b') {
  $('div').removeClass('a');
  iteration++;
  if (iteration < n) {
   setTimeout(function () {  $('div').addClass('a'); });
  } else {
   iteration = 0;
   $('button').removeAttr('disabled').text('Finished | Again');
  }
 }
})

$('button').click(function(){
  $('div').addClass('a');
  $(this).attr('disabled','true').text('Started'); 
});