How to know percentage of animation in CSS

Question

I searched and did not find a function or property of the Animate attribute (CSS), to track and control the percentage of a CSS animation. That is, I want, dynamically, to know in how many percent is the execution of the animation and to intervene, with a function, in certain points of the execution. PS: there are animationstart, animationend and animationiteration attributes. But for percentage? Any technique that does the equivalent?

Answer 1

Using Javascript (jQuery) it is possible to calculate the percentage of the animation using the events animationstart (when initiating) and animationend (when it ends), and anywhere in the animation use a if to perform an action in a given percentage, ranging from 0 to 100%.

The logic is to use setInterval() in the interval where you divide the animation time by 100, ie the setInterval() it shall rotate 100 times; and at each turn of the setInterval() a variable will be incremented with +1. This variable that determined in which percentage position the animation is taking place.

There is only one detail: the animation time value should be in seconds, for example:

animation: anima 3s linear forwards;
                 ↑
             3 segundos

It could also be in milliseconds, but then I would have to do a code check, increasing a few more lines. But I did to pick up only in seconds, which I found more practical.

Take an example:

CSS:

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

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

HTML:

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

JS:

$(function(){
   $("button").on("click", function(){
      var tempo; // variável a ser usada no setInterval

      $("div").css("animation", "anima 3s 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){
                  console.log("faz alguma coisa em 50%");
               }

            }, steps);
         }else if(e.type == "animationend"){
            clearInterval(tempo); // para o temporizador
            $this.html("100%");
         }
      });
   });
});

Test in JSFIDDLE because it doesn’t work here.

Answer 2

So you can make your animation from the beginning.
Check it out:

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

this is an example of css animation for "swing". Note that, at each percentage, it is possible to interfere by putting another action.
It’s boring to do, but it works.