How to trigger a css animation with vanilla javascript

Question

I'm trying to make a css animation trigger with javascript.I have made the animation with @keyframes and it works. Dose anyone know how to do this without stuff like jQuery?

Here is my code:

/* Animations */

@keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

@-webkit-keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

Answer 1

I think adding class is a healthy way to do it.

Check the example here: https://codepen.io/yasgo/pen/zYBgjXN

 document.getElementById('box').classList.add('active-animation');

 .box { width: 50px; height: 50px; background-color: black; } .box.active-animation { animation: party 5s infinite; } @keyframes party{ 0% {background-color: red;} 10% {background-color: orange;} 20% {background-color: yellow;} 30% {background-color: green;} 40% {background-color: blue;} 50% {background-color: purple;} }

 <div id="box" class="box"></di>

Answer 2

It's a lot easier than you think, you only need to call the animation, like this:

This is a example to trigger with a button

 function party(){ document.body.style.animation = 'party 2.5s infinite linear'; }

 body{ background-color: purple; } @keyframes party{ 0% {background-color: red;} 10% {background-color: orange;} 20% {background-color: yellow;} 30% {background-color: green;} 40% {background-color: blue;} 50% {background-color: purple;} } @-webkit-keyframes party{ 0% {background-color: red;} 10% {background-color: orange;} 20% {background-color: yellow;} 30% {background-color: green;} 40% {background-color: blue;} 50% {background-color: purple;} }

 <html> <body id="bd"> <button onclick="party()">Press Me!</button> </body> </html>

I wait this could help you!

Answer 3

You could set the animation property of the element you are trying to animate, like this.

 // sets the css animation property const spinner = document.getElementById("spinner"); spinner.style.animation = "spin 3s linear infinite";

 /* gives the div element a border and size */ #spinner { border: 15px solid black; border-top: 15px solid white; border-bottom: 15px solid white; border-radius: 50%; width: 50px; height: 50px; /* no animation property is inserted here */ } /* spin animation */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 <!-- div element to animate --> <div id="spinner"></div>

Answer 4

 var box = document.getElementById('box'); box.style.animation = "party 5s infinite";

 #box { width: 200px; height:150px; background-color: black; margin: 20px auto; border-radius: 5px; } @keyframes party{ 0% {background-color: red;} 10% {background-color: orange;} 20% {background-color: yellow;} 30% {background-color: green;} 40% {background-color: blue;} 50% {background-color: purple;} } @-webkit-keyframes party{ 0% {background-color: red;} 10% {background-color: orange;} 20% {background-color: yellow;} 30% {background-color: green;} 40% {background-color: blue;} 50% {background-color: purple;} }

 <div id="box"></div>

How to trigger a css animation with vanilla javascript

Question

4 answers

solution1
3 ACCPTED 2020-11-23 20:49:05

solution2
1 2021-05-13 17:15:04

solution3
0 2020-11-23 20:37:21

solution4
0 2020-11-23 20:55:23

How to trigger a css animation with vanilla javascript

Question

4 answers

solution1 3 ACCPTED 2020-11-23 20:49:05

solution2 1 2021-05-13 17:15:04

solution3 0 2020-11-23 20:37:21

solution4 0 2020-11-23 20:55:23

solution1
3 ACCPTED 2020-11-23 20:49:05

solution2
1 2021-05-13 17:15:04

solution3
0 2020-11-23 20:37:21

solution4
0 2020-11-23 20:55:23