我有一个基本的动画,但我希望能够随意启动和停止它 - 最好是一个简单的函数,没有/有限的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;}
}
答案 0 :(得分:1)
onClick="onclick = AnimationStart"
应为onClick="AnimationStart()"