2

ボタンで回転アニメーションを開始/停止しようとしています。私が何か間違ったことをしているかわからない。可能であればJQueryを避けたい....私はすでに頭の上にいます。

<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 {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -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/

前もって感謝します

4

2 に答える 2