function prepareLabelBeatStart() {
    const prepareLabelGroup = document.getElementById("prepare-label-group");
    let percent = document.getElementById("percent");
    prepareLabelGroup.classList.add("beaton");
            percent.textContent = 0+"%"
    let total = 6; //6 seconds 
    let step = 1;
    let Track = setInterval(function(){ 
      percent.textContent = Math.round(((step++) / total) * 100) + "%";
    }, 1000);
    let Track2 = setInterval(function(){ 
      
      if (prepareLabelGroup.classList.contains("beaton")) {
        prepareLabelGroup.classList.remove("beaton");
      }
      clearInterval(Track);
        clearInterval(Track2);
    }, 6000);
}
prepareLabelBeatStart();
setInterval(function(){ 
  prepareLabelBeatStart();
}, 6500);

.beaton {
    animation: beaton 1.5s ease-in-out infinite both;
}

@keyframes beaton {
  0% { transform: scale(1) }
  50% { transform: scale(0.5) }
  100% { transform: scale(1) }
}

#prepare-label-group {
  position: absolute;
  background: black;
  width: 50px;
  text-align:center;
}

#percent{
  color:white;
}

<div id="prepare-label-group"><div id="percent">0%</div></div>

function prepareLabelBeatStart() {
      const prepareLabelGroup = document.getElementById("prepare-label-group");
    prepareLabelGroup.classList.add("beaton");

      prepareLabelGroup.addEventListener("webkitAnimationEnd", beatonEnd);
    function beatonEnd(e) {
        console.log('FUCK');
       if (e.animationName === 'beaton') {
                 console.log('one iteration has been end'); // this is not working
           prepareLabelGroup.removeEventListener("webkitAnimationEnd", beatonEnd);
       } 
    }
}

setTimeout(() => prepareLabelBeatStart(), 2500);

.beaton {
    animation: beaton 1.5s ease-in-out infinite both;
}

@keyframes beaton {
  0% { transform: scale(1) }
  50% { transform: scale(0.5) }
  100% { transform: scale(1) }
}

#prepare-label-group {
  position: absolute;
  background: black;
  width: 50px;
}

<div id="prepare-label-group">ff</div>