Track when CSS keyframe animation reaches 50%

Question

I have a simple beating animation and I want to check when one iteration ends or reaches 50% keyframe or something like that, is this possible?

For now this is what I have tried but this doesn't track anything:

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>

A lot of the events around the animation stuff are all experimental. There are some events, but not well supported. — epascarello, Jan 06 '21 at 19:28
[This answer may help](https://stackoverflow.com/questions/54602064/read-style-information-from-javascript-web-animations-api-mid-state/54602379#54602379) — Kosh, Jan 06 '21 at 20:00

Tiffany · Accepted Answer · 2021-01-06T19:37:22.480

May be this will help.

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>

Track when CSS keyframe animation reaches 50%

1 Answers1