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

This is how you can use vanilla JavaScript to change/trigger an animation associated with an HTML element.

First, you define your animations in CSS.

@keyframes spin1 { 100% { transform:rotate(360deg); } }
@keyframes spin2 { 100% { transform:rotate(-360deg); } }
@keyframes idle { 100% {} }

Then you use javascript to switch between animations.

document.getElementByID('yourElement').style.animation="spin2 4s linear infinite";

Note: 'yourElement' is the target HTML element that you wish to animate.

For example:

...