javascript - 使用按钮播放/停止动画

Question

我有一个基本的动画，但我希望能够随意启动和停止它 - 最好使用简单的函数和无/有限的 jquery。

到目前为止，我一直只是将播放状态从“暂停”切换到“正在运行”，但这并没有奏效 - 想法？

到目前为止，这是我的代码:

HTML:

<div id="Arena"></div>
<div id="PlayButton" class="Button" onClick="onclick = AnimationStart"></div>

Javascript:

var AnimationStart;

var AnimationStart = function(){
    document.getElementById('Arena').style.animationPlayState="running";
    alert("The onclick is working!");
}

CSS:

    <style type="text/css">

#Arena{
    color:#FFF;
    width:400px;
    height:300px;
    animation-iteration-count:infinite;
    animation-play-state:paused;
    animation:colorchange 20s;
    -moz-iteration-count:infinite;
    -ms-iteration-count:infinite;
    -o-iteration-count:infinite;
    -webkit-iteration-count:infinite;
    -moz-play-state:paused;
    -ms-play-state:paused;
    -o-play-state:paused;
    -webkit-animation-play-state:paused;
    -moz-animation:colorchange 20s;
    -ms-animation:colorchange 20s;
    -o-animation:colorchange 20s;
    -webkit-animation:colorchange 20s;
}

@keyframes colorchange{
    0%{background:#FFF;}
    5%{background:#000;}
    10%{background:#FFF;}
    15%{background:#000;}
    20%{background:#FFF;}
    25%{background:#000;}
    30%{background:#FFF;}
    35%{background:#000;}
    40%{background:#FFF;}
    45%{background:#000;}
    50%{background:#FFF;}
    55%{background:#000;}
    60%{background:#FFF;}
    65%{background:#000;}
    70%{background:#FFF;}
    75%{background:#000;}
    80%{background:#FFF;}
    85%{background:#000;}
    90%{background:#FFF;}
    95%{background:#000;}
    100%{background:#FFF;}                              
}

@-moz-keyframes colorchange{
    0%{background:#FFF;}
    25%{background:#000;}
    50%{background:#FFF;}
    75%{background:#000;}
    100%{background:#FFF;}
}

@-webkit-keyframes colorchange{

        0%{background:#FFF;}
    5%{background:#000;}
    10%{background:#FFF;}
    15%{background:#000;}
    20%{background:#FFF;}
    25%{background:#000;}
    30%{background:#FFF;}
    35%{background:#000;}
    40%{background:#FFF;}
    45%{background:#000;}
    50%{background:#FFF;}
    55%{background:#000;}
    60%{background:#FFF;}
    65%{background:#000;}
    70%{background:#FFF;}
    75%{background:#000;}
    80%{background:#FFF;}
    85%{background:#000;}
    90%{background:#FFF;}
    95%{background:#000;}
    100%{background:#FFF;}
}

@-ms-keyframes colorchange{
    0%{background:#FFF;}
    50%{background:#000;}
    100%{background:#FFF;}
}

@-o-keyframes colorchange{
    0%{background:#FFF;}
    50%{background:#000;}
    100%{background:#FFF;}
}

Answer 1

onClick="onclick = AnimationStart" 应该是 onClick="AnimationStart()"