<div class="box">
	<div>Кликни для смены анимации</div>
	<div>Она начнется после полного проигрывания текущей анимации</div>
</div>

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.box {
	width: 220px;
	height: 100px;
	background-color: pink;
	box-sizing: border-box;
	border: 2px solid rgba(0, 0, 0, 0.24);
	text-align: center;
}

.box_animate_1 {
	animation: 2s animate forwards;
}

@keyframes animate {
	0%: {
		transform: translateX(0);
	}
	50% {
		transform: translateX(50px);
	}
	100% {
		transform: translateX(0);
	}
}

.box_animate_2 {
	animation: 2s animate_2 forwards;
}

@keyframes animate_2 {
	0%: {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

// Если ничего нет - возвращаем обычный таймер
window.requestAnimFrame = (function() {
	return (
		window.requestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function(/* function */ callback, /* DOMElement */ element) {
			window.setTimeout(callback, 1000 / 60);
		}
	);
})();

let box = document.querySelector('.box');
// Флаг для переключения между анимациями
let flag = 1;
box.addEventListener("click", function() {
	flag = 2;
});

// Отслеживаем окончание анимации
box.addEventListener("animationend", AnimationHandler, false);
// Запускаем анимацию
box.classList.add('box_animate_1');


function AnimationHandler () {
	// Удаляем все анимации
	box.classList.remove('box_animate_1', 'box_animate_2');
	// Меняем анимацию в зависимости от флага
	if(flag == 1) {
		animated (box, 'box_animate_1');
	} else if(flag == 2) {
		animated (box, 'box_animate_2'); 
		flag = 1;
	}
	
}
function animated (el, animateClass) {
	requestAnimationFrame( function() {
		requestAnimationFrame( function() {
			el.classList.add(animateClass);
		});
	});
}