Triggering a CSS animation using js and a button? - ☔︎ ∙ I need Help!

Icey!
Sr. Member ⚓︎

Triggering a CSS animation using js and a button?

« on: April 11, 2024 @26.06 »

I've been trying to make a page where if you press a button it triggers an animation but it seems that it will only play once and I can't seem to figure out a way to reset it so I can play it again.

Code

<!DOCTYPE html>
<html>
  <head>
  <style>
    body{
        background: pink;
    }
    #object {
        background: cyan;
        height: 100px;
        width: 100px;
        text-align: center;
    }
    @keyframes spin {
        from { 
            rotate: 0deg;
        }
        to {
            rotate: 360deg;
        }
    }
  </style>
    </head>
  <body>
    <div id="object"><p>-w-</p></div>
    <button onclick="playanim()" id="button">play</button>
  <script type="text/javascript">
        var obj = document.getElementById("object")

        function playanim() {
          obj.style.animation = null // <-- I want to reset the animation when pressing the button to play it again.
          obj.style.animation = "spin 2s"
        }
  </script>
  </body>
</html>

Anything helps! Thank you.


	Logged

my beloved

lilac
Casual Poster

Just for Fun. No, Really.

Re: Triggering a CSS animation using js and a button?

« Reply #1 on: April 11, 2024 @401.20 »

Seems like this is the easiest way to do it. Apparently it has something to do with reflow

Code

obj.style.animation = null; // <-- I want to reset the animation when pressing the button to play it again.
obj.offsetHeight; // <-- Add this line
obj.style.animation = "spin 2s";


	Logged

Icey!
Sr. Member ⚓︎

Re: Triggering a CSS animation using js and a button?

« Reply #2 on: April 11, 2024 @829.99 »

Quote from: lilac on April 11, 2024 @401.20

Seems like this is the easiest way to do it. Apparently it has something to do with reflow

Code
obj.style.animation = null; // <-- I want to reset the animation when pressing the button to play it again.
obj.offsetHeight; // <-- Add this line
obj.style.animation = "spin 2s";

works thamk u!!!!! :D


	Logged

my beloved

Pages: [1]

« previous next »

Vaguely similar topics! (3)