JSFiddle - React, Tailwind, and code Playground

HTML

<button>Iniciar animação</button>
<div>0%</div>

CSS

div{
   position: relative;
   width: 40px;
   height: 40px;
   background: red;
}

@keyframes anima {
  from {left: 0;}
  to {left: 200px;}
}

JavaScript

$(function(){
   $("button").on("click", function(){
      var tempo; // variável a ser usada no setInterval
      
      $("div").css("animation", "anima 5s linear forwards");
      
      $("div").on("animationstart animationend", function(e){
         
         var $this = $(this); // elemento animado
         var duracao = parseFloat($this.css("animation-duration")); // pega a duração da animação
         var steps = (duracao*1000)/100; // determina o tempo do setInterval
         var perc = 0; // variável do percentual
         
         if(e.type == "animationstart"){
            tempo = setInterval(function(){
               perc++;
               var pos = parseFloat($this.css("left"));
               $this.html(perc+"%");
               
               // faz algo quando atingir os 50%
               if(perc == 50){
                  $this.css("background","yellow")
               }
               
            }, steps);
         }else if(e.type == "animationend"){
            clearInterval(tempo); // para o temporizador
            $this.html("100%");
         }
      });
   });
});