Restart HTML Webkit animation via Javascript onclick |
Restart HTML Webkit animation via Javascript onclick |
James432213 |
Mar 24 2019, 01:16 AM
Post
#1
|
Group: Members Posts: 7 Joined: 16-March 19 Member No.: 26,853 |
How would I restart an HTML animation which is created with CSS using onclick with javascipt?
Thank you very much CODE <style> #ball { position: absolute; left: 600px; top: 520px; animation-name: move; animation-duration: 3s; animation-delay: 0s; animation-iteration-count: 1; } @keyframes move{ 0% { left:600px; top:510px;} 100% { left:600px; top:600px} } </style> <script> function Restart(){ } </script> <div id="RestartButton"><img src="RestartButton.png" onclick="Restart();"/></div> <div id="ball"><img src="ball.png"/></div> |
pandy |
Mar 24 2019, 07:08 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
There are some ideas around if you google, of which this is probable the best. At least it's well-documented.
https://css-tricks.com/restart-css-animation/ Personally I don't see the point. If JS/jQuery is going to be used, why not use a JS animation to start with? It will depend on JS either way. |
Lo-Fi Version | Time is now: 23rd April 2024 - 02:05 AM |