JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="box-0" data-status="default" data-box="0">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
</div>

<button id="ToggleAnim">Toggle</button>

CSS

* {
	margin:0;
	padding:0;
}
#container {
		background: orange;
		height: 100px;
		position: relative;
		width: 100px;  
}
.box {
		height: 100px;
		left: 0;
		position: absolute;
		top: 0;
		width: 100px; 
		-webkit-transition:all 0.5s ease-in-out 0s;
		-moz-transition:all 0.5s ease-in-out 0s;
		-o-transition:all 0.5s ease-in-out 0s;
		transition:all 0.5s ease-in-out 0s;
		-webkit-transform: translate3d(0,0,0);
}			
.box-1 {
		background: red;
}
.box-2 {
		background: green;
}
.box-3 {
		background: yellow;
}
.box-4 {
		background: blue;
}
.box-1 .box-1 {
	left:100px;
}
.box-2 .box-2 {
	left:200px;
}
.box-3 .box-3 {
	left:300px;
}
.box-4 .box-4 {
	left:400px;
}

JavaScript

(function(){
	var testies = {
		to: 0,
		init: function(){
			$button = $('#ToggleAnim');
			$anim_elm = $('#container');
			$(function(){
				testies.el();
			});
		},
		el: function(){ // el ==> event listeners
			$button.on('click', testies.toggleBoxes);
		},
		toggleBoxes: function(evt){
			var status = $anim_elm.attr('data-status'),
					pos = $anim_elm.attr('data-box');
			window.clearTimeout(testies.to);
			// if default ==> build
			// if killing ==> build
			// if building ==> kill
			// if done ==> kill
			if(status == 'build' || status == 'done'){
					testies.kill();
			} else {
					testies.build();
			}
			evt.preventDefault();
		},
		build: function(){
			bpos = $anim_elm.attr('data-box');
			if(bpos < 4){
				bpos++;
				$anim_elm.attr('data-status', "build").attr('data-box', bpos).addClass('box-' + bpos);
				testies.to = window.setTimeout(testies.build, 500);
			}
			if(bpos == 4)$anim_elm.attr('data-status', "done");
			console.log('BUILD: ' + bpos);
		},
		kill: function(){
			kpos = $anim_elm.attr('data-box');
			if(kpos > 0){
				db = kpos - 1;
				$anim_elm.attr('data-status', "kill").attr('data-box', db).removeClass('box-' + kpos);
				testies.to = window.setTimeout(testies.kill, 500);
			}
			console.log('KILL: ' + kpos);
			if(kpos == 0)$anim_elm.attr('data-status', "default")
		}
	}
	testies.init();
})();