JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="start">Start</button>
<button id="pause">Pause</button>

<div class="ball"></div>

CSS

.ball {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
  transition: all 10s;
}

.ball.running {
  transform: translateX(400px);
}

JavaScript

$('#start').on('click', function() {
	$('.ball').addClass('running');
});

$('#pause').on('click', function() {
	$('.ball').css('transition-duration: 5000s');
});