JSFiddle - React, Tailwind, and code Playground

HTML

<div id='hover'></div>

<div id='hover2'></div>

<div id='log'></div>

CSS

div#log { margin-top: 50px; border: 1px dashed green; width: 200px; height: 100px; }

div#hover, div#hover2 {
    height: 100px;
    width: 200px;
    border: 1px solid red;
    -webkit-transition: background-color 1s;
}

div#hover:hover, div#hover2:hover { background-color: #9f9f9f; }
div#hover2 {
    border: 1px solid blue;
    background-color: #9f9f9f;
}

JavaScript

$("#hover").on('webkitTransitionEnd', function() { $("#log").append("transition ended <br />") } );
                                                    
$("#hover2").on('webkitTransitionEnd', function() { $("#log").append("transition ended <br />") } );