<div class='arrow-right'>
  <div class='arrow-mask '></div>
</div>

@arrow-size: 20vw;
body{
  background-color: beige;
  animation: paint 10s ease-in-out infinite;
}
.arrow-right {
  width: @arrow-size;
  height: @arrow-size;
  background-color: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: paintArrow 10s ease-in-out infinite;
}
.arrow-mask {
  width: 100%;
  height: 100%;
  background-color: beige;
  position: absolute;
  left: 15%;
  top: -15%;
  right: 0%;
  bottom: 0%;
  animation: paint 10s ease-in-out infinite,
             flip 10s ease-in-out infinite;
}
@keyframes flip {
  /* arrow facing left */
  /* arrow facing bottom */
  5%,25% {
    left: -15%;
    top: -15%;
    right: 0%;
  }
  /* arrow facing right */
  30%,50%  {
    left: -15%;
    top: 15%;
    right: 0%;
  }
  /* arrow facing top */
  55%,75% {
    left: 15%;
    top: 15%;
    right: 0%;
  }
  /* arrow facing left (again) */
  80%, 0% {
    left: 15%;
    top: -15%;
    right: 0%;
  }
}
  @keyframes paint {
  /* arrow facing bottom */
  5%,25%  {
  background-color: #fd4136;
  }
  /* arrow facing right */
  30%,50% {
  background-color: #0f213e;
  }
  /* arrow facing top */
  55%,75%  {
  background-color: #1abc9c;
  }
  /* arrow facing left (again) */
  80%,0% {
  background-color: beige;
  }
}
@keyframes paintArrow {
  /* arrow facing bottom */
  5%,25% {
  background-color: white;
  }
  /* arrow facing right */
  30%,50% {
  background-color: #f1c40f;
  }
  /* arrow facing top */
  55%,75% {
  background-color: #2c3e50;
  }
  /* arrow facing left (again) */
  80%,0% {
  background-color: #2ecc71;
  }
}

var elem = document.querySelector('.arrow-mask');
elem.addEventListener("animationiteration", iteratingElem, false);
function iteratingElem(e){
  console.log('this animation has iterated');
  console.log('elapsed time is ' + e.elapsedTime + 's');
  elem.classList.add("red");
  if (elem.classList.contains('red')) {
    console.log('red');
  }
};