CSS animation 的 jQuery 事件监听器结束

Question

I have a problem with jQuery. I have tried adding the .on event listener for when an animation ends. Its not working. I want the jetPosition and animationDuration to be random every time the animation restarts. I put a console.log to check if the listener is triggered and it is not:( Any help would be very much appreciated.

I also changed it on further research to animationiteration event listener. It seems to work though it doesn't always start from the left of the screen and has spurts of the repeat in console log without clear reason.

As an extra bonus, I would love to apply multiple instances of jet all over the viewport.

CSS:

#jet {
    animation: fly linear 0s infinite normal backwards;
}

/*Keyframes*/

@keyframes fly {
    from {
        transform: translateX(-10vw)
    }

    to {
        transform: translateX(140vw)
    }
}

jQuery:

function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Jet Animation
    var jet = $("#jet");

    jet.css({
        top: getRndInteger(20, 50) + "vh",
        left: '0vw',
        width: '8vw',
        position: 'absolute',
        animationDuration: getRndInteger(5, 10) + "s"
    });

    function flyJet() {
        jet.css({
            top: getRndInteger(20, 50) + "vh",
            left: '0vw',
            width: '8vw',
            position: 'absolute',
            animationDuration: getRndInteger(5, 10) + "s"
        });
    }


    jet.on("animationiteration", function () {
        console.log("repeating");
        flyJet();
    });

Answer 1

Try using something like:

element.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {
    // code to execute after transition ends
});

Check out this for more info.