JSFiddle - React, Tailwind, and code Playground

by camel2243

HTML

<div id ="container">
<div id ="animate"></div>

CSS

#container {
  width: 400px;
  height: 50px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

JavaScript

var elem = document.getElementById("animate"); 
var left = 0;
var bound = false;
  
requestAnimationFrame(Move);

function Move() {
  if(left === 0 || left === 350) {
    bound = !bound;
  }
  (bound) ? left++ : left--;
  elem.style.left = left + 'px'; 
  window.requestAnimationFrame(Move);
}