JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Без reflow с середины</h4>
<div class="ball" id="ball1" style="transform: translateX(100px);"></div>
<button id="btn1">Старт/Стоп</button>
<h4>С reflow с середины</h4>
<div class="ball" id="ball2" style="transform: translateX(100px);"></div>
<button id="btn2">Старт/Стоп</button>

CSS

.ball {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: translateX(0px);
  transition-property: transform;
  transition-duration: 1000ms;
  transition-timing-function: linear;
  background-color: red;
}

button {
  margin-top: 25px;
}

JavaScript

document.getElementById('btn1').onclick = function() {
	var ball = document.getElementById('ball1');
  ball.style.transform = 'translateX(0px)';
  ball.style.transitionDuration = '0ms';
  ball.style.transitionDuration = '';
  ball.style.transform = 'translateX(200px)';
};


document.getElementById('btn2').onclick = function() {
	var ball = document.getElementById('ball2');
  ball.style.transform = 'translateX(0px)';
  ball.style.transitionDuration = '0ms';
  ball.offsetWidth; // force reflow
  ball.style.transitionDuration = '';
  ball.style.transform = 'translateX(200px)';
};