JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>
<button id="start">start</button>

CSS

html,body {
  margin: 0;
}

#box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 100px;
  background: red;
}
#start {
  position: absolute;
  left: 100px;
  top: 0;
}

JavaScript

let box = document.querySelector('#box')

document.querySelector('#start').addEventListener('click', () => {
  box.style.transform = 'translateX(300px)'
  requestAnimationFrame(() => {
  	box.style.transition = 'transform 1s linear'
  	box.style.transform = 'translateX(150px)'
  })
})