javascript - Problems toggling animation play state -


i'm trying start/stop rotate animation button. not sure i'm doing wrong. i'd rather avoid jquery if possible....i'm in above head.

<head> <style type='text/css'>     #spinner {     -webkit-animation: spin 2s linear infinite;     -webkit-animation-play-state:running;     border: 1px dashed;     border-radius: 50%;     width: 5em;     height: 5em;     margin: 2em auto;     padding: 2em; } @-webkit-keyframes spin {     {         -webkit-transform:rotate(0deg);     }     {         -webkit-transform:rotate(360deg);     } }   </style>    <script type='text/javascript'>//<![cdata[  window.onload=function(){ function spin() {     var spinner = document.getelementbyid("spinner");      if (spinner.style.webkitanimationplaystate === 'running') {         spinner.style.webkitanimationplaystate = 'paused';         document.body.classname = 'paused';     } else {         spinner.style.webkitanimationplaystate = 'running';         document.body.classname = '';     } } }//]]>    </script>   </head> <body>   <div id="spinner">spin!</div> <button onclick="spin();">start/stop</button>  </body>

http://jsfiddle.net/uc9c5/1/

thanks in advance

firstly, in jsfiddle running onload in jsfiddle when should have been using no wrap in <head> section option.

secondly, i've made changes css - namely, changing -webkit-animation-play-state:running; -webkit-animation-play-state:paused; initial state, ready function call start animation.

here's working jsfiddle.

edit: in regard flicker, seems sadly it's webkit bug.


Comments

Post a Comment