JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div id="notaccel">animating left!</div>
<div id="accel">animating translate3D!</div>

CSS

#notaccel, #accel {
    position: absolute;
    height: 50px;
    width: 150px;
}

#notaccel {
    background: red;
}

#accel {
    top: 60px;
    background: green;
    -webkit-transform: translate3d(0, 0, 0);
}

JavaScript

var accel = document.getElementById("accel");
var notaccel = document.getElementById("notaccel");

 setInterval(function() {
    var time = (new Date()).getTime();
    var position = (time/2) % 500;
    var positionpx = position + 'px';    
     
    accel.style.webkitTransform="translate3d("+positionpx+", 0, 0)"
    notaccel.style.left=positionpx;
}, 0);