JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click anywhere to move the ball</p>
<div id="ball"></div>
<pre id="logger"></pre>

CSS

#ball {
    border-radius: 50px;
    width: 50px;
    height: 50px;
    background: #c00;
    position: absolute;
    top: 50px;
    left: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

JavaScript

var ball = document.getElementById('ball');
var logger = document.getElementById('logger');

var transitionEnd = function (e) {
    logger.innerHTML += 'transitionend ' + e.propertyName + '\n';
};

document.addEventListener('click', function (ev) {
    ball.style.left = (ev.clientX - 25) + 'px';
    ball.style.top = (ev.clientY - 25) + 'px';
}, false);

// Works in FireFox
ball.addEventListener("transitionend", transitionEnd, false);
// Webkit / Chrome
ball.addEventListener("webkitTransitionEnd", transitionEnd, false);