JSFiddle - React, Tailwind, and code Playground

by louisremi

HTML

<div id="animatedElem"><div>

CSS

#animatedElem {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ff6600;
}

JavaScript

var elem = document.getElementById("animatedElem"),
  left = 0,
  timer;
// Move the element 10px on the right every 16ms
timer = setInterval(function() {
  elem.style.left = ( left += 10 ) + "px";
  // clear the timer at 400px to stop the animation
  if ( left == 400 ) {
    clearInterval( timer );
  }
}, 16);