JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div id="my-element">Щелкните, чтобы начать анимацию</div>

CSS

#my-element {
  position: absolute;
  left: 0;
  width: 200px;
  height: 200px;
  padding: 1em;
  background: tomato;
  color: #FFF;
  font-size: 2em;
  text-align: center;
}

JavaScript

var elem = document.getElementById('my-element'),
    startTime = null,
    endPos = 500, // в пикселях
    duration = 2000; // в миллисекундах

function render(time) {
  if (time === undefined) {
    time = new Date().getTime();
  }
  if (startTime === null) {
    startTime = time;
  }

  elem.style.left = ((time - startTime) / duration * endPos % endPos) + 'px';
}

elem.onclick = function() {
  (function animationLoop(){
    render();
    requestAnimationFrame(animationLoop, elem);
  })();
};