JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/resources/themeroller.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/external/farbtastic.css">
<span id="test" class="ui-icon ui-icon-info state1"></span>

CSS

.state1 {

background-color: red;
position: relative;
-webkit-transition: background-color 2s ease;
transition: background-color 2s ease;
}
.state2 {
background-color: white;
position: relative;
-webkit-transition: background-color 2s ease;
transition: background-color 2s ease;
}

JavaScript

var f = document.getElementById('test');
f.addEventListener("transitionend", updateTransition, true);

 function updateTransition() {
  var el = document.querySelector("span.state1");
   
  if (el) {
    el.className = "ui-icon ui-icon-info state2";
  } else {
    el = document.querySelector("span.state2");
    el.className = "ui-icon ui-icon-info state1";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 2000);