The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Restart HTML Webkit animation via Javascript onclick
James432213
post 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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 24 2019, 07:08 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd October 2019 - 07:35 AM