Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
September 05, 2026 - @97.31
Activity rating: Four Stars Posts & Arts: 78/1k.beats Random | Recent Posts | Guild Recents
News: :4u: ~~~~~~~~~~~  :4u: Guild Events: 10: window

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Triggering a CSS animation using js and a button?

 « previous next »
Pages: [1] Print Embed
Author Topic: Triggering a CSS animation using js and a button?  (Read 1430 times)
Memory
Guest
« on: April 11, 2024 @26.06 » Embed
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
lilac
Casual Poster
*
View ProfileArt


Just for Fun. No, Really.
⛺︎ My Room

Artifacts:
Story Builder!First 1000 Members!Joined 2023!
« Reply #1 on: April 11, 2024 @401.20 » Embed
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
https://imgsrc.neocities.org/bannerabout3.png
Memory
Guest
« Reply #2 on: April 11, 2024 @829.99 » Embed
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
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
@000 MelonLand Everyone Site Editor Recent Edits Tenement Arcade Want to Login or Join ? Forum Art Hub Chat Webring Linkz Web Guides Graphics Catalogue Wiki Newsletters Image Stream
Melon's Sites TamaNotchi Textures PixelSea GifyPet MoMG Ozwomp Online Loom Videos Leaky Webring Melonking
Tools Melon Software ArtHub Embed Maker ML Passports
Outlinks Frutiger Aero Forum Onio Club m15o's Web Services 32Bit Cafe iMood Webrings Internet Phone Book HTML Energy Declarations Hackers & Designers
Search Zap!

Forum Theme Picker

 Minecraft: Online
Join: craft.melonking.net