JSFiddle - React, Tailwind, and code Playground

HTML

<html>



<body>

<button>Click to flash the app background color</button>

  <select>
    <option class="app" value="1" selected="selected">Yksi</option>
    <option class="app" value="2">Kaksi</option>
    <option class="app" value="3">Kolme</option>
    <option class="app" value="4">Neljä</option>
  </select>

</body>

</html>

SCSS

@-webkit-keyframes quickFlash {
  0% {
    background-color: red;
  }
/*   22% {
    background-color: yellow;
  }
  77% {
    background-color: yellow;
  } */
  100% {
    background-color: white;
  }
}

.quickFlash {
  //https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
  -webkit-animation-name: quickFlash;
  -webkit-animation-duration: 1900ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: quickFlash;
  -moz-animation-duration: 1900ms;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
}


#app{
  min-height: 500px;
  padding: 20px;
}

JavaScript

function flashYellow(element) {
  element
    .addClass("quickFlash")
    .on(
      "webkitAnimationEnd oanimationend msAnimationEnd animationend",
      function() {
        console.log("animationend");
        $(this)
          .delay(500)// Wait for milliseconds.
          .queue(function() {            
            console.log("end of delay");
            $(this)
              .removeClass("quickFlash")
              .dequeue();
          });
      }
    );
}

$(document).ready(function() {
  $("button").click(function() {
    flashYellow($(".app"));
  });
});