JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Без reflow</h4>
<div class="ball" id="ball1" style="display: none;"></div>
<button id="btn1">Старт/Стоп</button>
<h4>С reflow</h4>
<div class="ball" id="ball2" style="display: none;"></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

var ball1started = false;

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


var ball2started = false;

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