javascript - Playing/Stopping an animation with a button

Question

I've got a basic animation going, but I want to be able to start and stop it at will - preferably with a simple function and none/limited jquery.

So far I've simply been switching the play state from "paused" to "running", but this hasn't worked - ideas?

This is my code so far:

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()"