JSFiddle - React, Tailwind, and code Playground

by Rayon Dabre

HTML

<p>
  <button onclick="animateMe()">OK</button>
</p>
<div id="box">
  <div id="ani"></div>
</div>

CSS

#box {
   background: red;
   width: 400px;
   height: 400px;
   position: relative;
 }
 
 #ani {
   background: blue;
   width: 50px;
   height: 50px;
   position: absolute;
 }

JavaScript

function animateMe() {
  var elem = document.getElementById('ani');
  var pos = 0;
  var id = setInterval(frame, 3);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}