JSFiddle - React, Tailwind, and code Playground

by kazabr

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);
    })();
};