JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">relative<br>left</div>
<div class="box2">transform<br>translate</div>

<button>Go!</button>

CSS

div {
  width:100px;
  height:100px;
  border:1px solid red;
  padding:10px;
  margin:10px;
  -webkit-transition:all .5s ease;
  transition:all 1s ease;
}

.box1 {
  position:relative;
  left:0;
}
.box1.go {
  left: 500px;
}

.box2 {
  -webkit-transform: translate3d(0, 0, 0);
}
.box2.go {
  -webkit-transform: translate3d(500px, 0, 0);
}

JavaScript

$("button").click(function(){
  $("div").toggleClass("go");
});