JSFiddle - React, Tailwind, and code Playground

HTML

<div id="obj0"></div>
<div id="obj1"></div>
<div id="obj2"></div>
<div id="obj3"></div>
<div id="obj4"></div>

CSS

div{
    width:20px;
    height:20px;
    background-color:red;
}
/*
#obj0{-webkit-transform:translate3d(0,10,0)}
#obj1{-webkit-transform:translate3d(0,20,0)}
#obj2{-webkit-transform:translate3d(0,30,0)}
#obj3{-webkit-transform:translate3d(0,40,0)}
#obj4{-webkit-transform:translate3d(0,50,0)}
*/

JavaScript

var Animations = {};
Animations.translateY = function(element, measurement, duration, callback, easing) {
    //Animations.setAnimationCallback(element,callback)
    var css = "translate3d(0," + measurement + "px,0)";
    duration = parseFloat(duration);
    element.style['-webkit-transition-duration'] = duration + 's';
    element.style['-webkit-transform'] = css;
Animations.setAnimationCallback(element,callback)
}


Animations.setAnimationCallback = function(element, callback) {
    //set callback handler
    element.addEventListener('webkitTransitionEnd', function() {
        //set animation duration back to 0
        this.style['-webkit-transition-duration'] = "0s";
        if (callback != null) {
            callback();
        }
        this.removeEventListener('webkitTransitionEnd', arguments.callee, null);
    });
}

for (var i = 0; i < 5; i++) {
    Animations.translateY(document.getElementById('obj' + i), 45+Math.round(Math.random()*45), 0.001, function() {
        console.log('a')
    })
}