Trigger CSS Animations in JavaScript

Question

I don\'t know how to use JQuery, so I need a method which could trigger an animation using JavaScript only.

I need to call/trigger CSS Animation when the user scrol

Answer 1

Here's the main code:

HTML:

CSS:

#myImg {
    //properties
    animation: animate 2s linear infinite //infinite is important!
}
@keyframes animate {
    //animation base
}

JS:

document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
window.addEventListener("scroll", function() {
    document.getElementById("myImg").style.webkitAnimationPlayState = "running";
    setTimeout(function() {
        document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
    }, 2000);
});