<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);
    });
  });
}