How to measure the amount of time an animation took place using JavaScript

Question

Let me explain the problem. I'm creating a phonegap application and I have some css animations running. The animation in question is a hand moving onto the screen and when it reaches 300px down the screen to then animate backwards.

CSS:

   .handmovedown{

      transform: translateY(300px);
        -webkit-transform: translateY(300px); /** Safari & Chrome **/
        -o-transform: translateY(300px); /** Opera **/
        -moz-transform: translateY(300px); /** Firefox **/
    }

    .handmoveup{

      transform: translateY(-300px);
        -webkit-transform: translateY(-300px); /** Safari & Chrome **/
        -o-transform: translateY(-300px); /** Opera **/
        -moz-transform: translateY(-300px); /** Firefox **/
    }

.objecttransition{

    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/
    -moz-transition: all 0.5s linear; /** Firefox **/
    -o-transition: all 0.5s linear; /** Opera **/
}

As we can see the handmovedown makes the hand move down and the handmoveup makes the hand move up. Now the objecttransition makes sure that each animation that runs takes 0.5s. Here is my JS:

$(document).ready(
    function()
    {
        $("#Hand").addClass("handmovedown");
        $("#Logo").addClass("logomove");
        setInterval(function(){$("#Hand").addClass("handmoveup");},700);
});

Now the code above adds the handmovedown then 700 milliseconds later the handmoveup is added to the hand the the hand moves backwards. Everything in the BROWSER works fine. When I put it in phonegap and run it on Android. The handmovedown takes longer than 0.5 seconds to run and then the handmoveup kicks in and the animation looks odd. My question is how would I measure how long the handmovedown took so that the handmoveup could wait the right amount of time before it triggers?

score 1 · Accepted Answer · edited May 23 '17 at 10:25

You can listen for the event fired when the transition completes, and then schedule the next transition. This answer covers all the hoops to jump through to make this happen cross-browser.

Here's the simplified version that would only work on webkit, just to give you the idea:

$(document).ready(
    function()
    {
        $("#Hand").addClass("handmovedown").on("webkitTransitionEnd", function() {
            // This will get fired at the end of each transition.
            // (Your code wasn't doing it, but I assume we have to remove the
            // handmovedown class here as well as adding handmoveupm, so toggle
            // works)
            setTimeout(function() {
                $(this).toggleClass("handmovedown handmoveup");
            }, 200); // 200ms later
        });
        $("#Logo").addClass("logomove");
    }
);

How to measure the amount of time an animation took place using JavaScript

If you really wanted to know how long it took (I don't get the sense you really did), then:

$(document).ready(
    function()
    {
        var started = new Date();
        $("#Hand").addClass("handmovedown").on("webkitTransitionEnd", function() {
            // This will get fired at the end of each transition.
            console.log("Completed after " + (new Date() - started) + "ms");

            // (Your code wasn't doing it, but I assume we have to remove the
            // handmovedown class here as well as adding handmoveupm, so toggle
            // works)
            setTimeout(function() {
                started = new Date();
                $(this).toggleClass("handmovedown handmoveup");
            }, 200); // 200ms later
        });
        $("#Logo").addClass("logomove");
    }
);

The reason I wanted to time the event was to find out how to it took so I could make the other function wait that long using the setTimeout. But your solution with the event was spot on! Thank you — user481610, Jan 15 '14 at 09:53

score 0 · Answer 2 · answered Jan 15 '14 at 09:43

Question, why don't you use an animation with keyframes instead? Such as:

@-webkit-keyframes handMove {
  50% { -webkit-transform: translateY(300px); /** Safari & Chrome **/ }
  100% { -webkit-transform: translateY(-300px); /** Safari & Chrome **/ }
}

Unless you need the time it takes for the animation to complete for any other reason, this would accomplish the element moving up and then back down.

How to measure the amount of time an animation took place using JavaScript

2 Answers2