Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to play animation on div with javascript

Here is my script so far:

Html:

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>

<body>
    <div id="test"></div>
</body>

</html>

Css:

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
}

/* Here is the animation (keyframes) */
@keyframes fading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

But how do i get the css animation (keyframes) to play on the div #test using some javascript?

like image 573
Clint Anumudu Avatar asked Oct 24 '25 17:10

Clint Anumudu


1 Answers

Try to add 'animation' css property from js:

document.getElementById('test').style.animation = 'fading 2s infinite'
like image 78
Dmitry Sobolevsky Avatar answered Oct 26 '25 07:10

Dmitry Sobolevsky



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!