Edit in JSFiddle

var propertyObject = {};

$("#start-animation").click(function(){
	var selector = $("#animation-select").val();
	var property = "";
	
	if(selector.includes("transform")){
		property = "translateX";
	}else if(selector.includes("trbl")){
		property = "left";
	}
	
	propertyObject[property] = "200px";
	
	$("." + selector).velocity(propertyObject, 
	{
		duration: 1000,
		easing: "ease",
		loop: true
	});
});

$("#animation-select").on("change", function(event){
	event.preventDefault();
	
	var selector = $(this).val();
	
	var allClasses = ["transform", "trbl", "transform-ha", "trbl-ha"];
	
	for(var className of allClasses){
		if(className !== selector){
			resetProperties();
			
			$("." + className).css("display", "none");
			
			if($("." + className).hasClass("velocity-animating")){
				$("." + className)
					.velocity("stop", true)
					.velocity(propertyObject);
			}
				
		}
	}
	
	if($("." + selector).css("display") === "none"){
		$("." + selector).css("display", "block");
	}
});

function resetProperties(){
	for(var property in propertyObject){
		propertyObject[property] = 0;
	}
}
.transform-ha, .trbl-ha{
	-webkit-transform: translateZ(0);
   	-moz-transform: translateZ(0);
   	-ms-transform: translateZ(0);
   	-o-transform: translateZ(0);
   	transform: translateZ(0);

   	-webkit-backface-visibility: hidden;
   	-moz-backface-visibility: hidden;
   	-ms-backface-visibility: hidden;
   	backface-visibility: hidden;

   	-webkit-perspective: 1000;
   	-moz-perspective: 1000;
   	-ms-perspective: 1000;
   	perspective: 1000;
}


.box{
	background-color: black;
	width: 100px;
	height: 100px;
	color: white;
	margin-bottom: 10px;
}

.center{
	position: relative;
	top: 50%;
	transform: translateY(-50%); 
	text-align: center;
	width: 100%;
}

.transform, .transform-ha{
	background-color: teal;
}

.trbl, .trbl-ha{
	background-color: orange;
	position: relative;
}

#row-1{
	display: block;
}

.row{
	width: 300px;
	background-color: white;
	display: none;
}
<select id="animation-select">
	<option default="default" value="transform">Transform</option>
	<option value="trbl">TRBL</option>
	<option value="transform-ha">Transform HA</option>
	<option value="trbl-ha">TRBL HA</option>
</select><br /> 
<button type="button" id="start-animation">Alusta animatsiooniga</button>
<p>Transform - Animatsioon koos CSSi teisendusega (translateX)</p>
<p>TRBL (Top Right Bottom Left) - Animatsioon koos Left omadusega</p>
<div class="row transform" id="row-1">
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
	<div class="transform box"><div class="center">Transform</div></div>
</div>
<div class="row trbl" style="display: none" id="row-2">
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
	<div class="trbl box"><div class="center">TRBL</div></div>
</div>
<div class="row transform-ha" id="row-3">
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
	<div class="transform-ha box"><div class="center">Transform with HA</div></div>
</div>
<div class="row trbl-ha" id="row-4">
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
	<div class="trbl-ha box"><div class="center">TRBL with HA</div></div>
</div>

External resources loaded into this fiddle: