JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
<div id="theThing">I'm moving!</div>    
</div>
<button>Replay!</button>

CSS

#wrap{
    position:relative;
    height:400px;
    width:400px;
    outline: 2px dotted blue;
}

#theThing{
    top : 0;
    left : 0;
    position:absolute;
    -webkit-transition-property:top,left;
    -moz-transition-property:top,left;
    -o-transition-property:top,left;
    transition-property:top,left;
    -webkit-transition-timing-function:linear;    
    padding:50px;
    background: teal;
}

JavaScript

var duration = '1s';

function animateIt(){
    $('#theThing').css({
        '-webkit-transition-duration' : duration,
        '-moz-transition-duration' : duration,
        '-o-transition-duration' : duration,
        'transition-duration' : duration
    }).css({
        top  : 200,
        left : 200
    });
};

function resetIt(){
    // reset also removes the style attribute
    // that contains the duration, so top:0,left:0
    // will not animate but be instant
    $('#theThing').removeAttr('style').css({
        top  : 0,
        left : 0
    });
};

animateIt();

$('button').on('click',function(){
    resetIt();
    // set timeout to insure that reset has
    // finished before running animation again
    // 16ms is 60fps standard for such a timeout
    setTimeout(function(){
        animateIt();
    },16);
});