Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Restart HTML Webkit animation via Javascript onclick

Posted by: James432213 Mar 24 2019, 01:16 AM

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>



Posted by: pandy Mar 24 2019, 07:08 AM

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.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)