<div class="box"></div>

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

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

.box_animate_1 {
	animation: 1s animate forwards;
}

@keyframes animate {
	0%: {
		transform: scale(1);
	}
	50% {
		transform: scale(2);
	}
	100% {
		transform: scale(1);
	}
}

.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;
// Счетчик для смены анимации
let count = 3;

// Отслеживаем окончание анимации
box.addEventListener("animationend", AnimationHandler, false);

// Запускаем анимацию
animated (box, 'box_animate_1');

function AnimationHandler () {
	// Удаляем все анимации
	box.classList.remove('box_animate_1', 'box_animate_2');
	if(flag == 1) {
		animated (box, 'box_animate_1');
		if (--count == 0) flag = 2;
	} else if(flag == 2) {
		animated (box, 'box_animate_2'); 
		flag = 1;
		count = 3;
	}
	
}
function animated (el, animateClass) {
	requestAnimationFrame( function() {
		requestAnimationFrame( function() {
			el.classList.add(animateClass);
		});
	});
}