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

使用按钮播放/停止动画

1 个答案: