Javascript 如何更改css3动画状态
我想做的是播放和暂停css3动画Javascript 如何更改css3动画状态,javascript,css,animation,Javascript,Css,Animation,我想做的是播放和暂停css3动画 通过此链接： 我学会了如何暂停动画 我也实现了，但当我暂停动画时，它会回到初始状态 如何暂停或恢复上次状态（暂停或播放），而不返回初始状态？ 这是我的密码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Teleprompter</title> <style> .demo{ width: 500p
通过此链接： 我学会了如何暂停动画
我也实现了，但当我暂停动画时，它会回到初始状态 如何暂停或恢复上次状态（暂停或播放），而不返回初始状态？
这是我的密码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teleprompter</title>
<style>
.demo{
width: 500px;
height: 500px;
}
.demo1
{
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
.demo1:hover
{
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.PauseAnimation{
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.RunningAnimation{
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
@-webkit-keyframes example {
from {transform:translateY(0px);}
to {transform:translateY(-100px);}
}
@keyframes example {
from {transform:translateY(0px);}
to {transform:translateY(-100px);}
}
</style>
<script>
function f1()
{
var flag=0;
var s = document.getElementById('btn1').innerHTML;
if(s=="Play"){
document.getElementById('btn1').innerHTML='Pause';
if(flag==0){
document.getElementById('p1').className='demo1';
flag=flag+1;
return;
}
document.getElementById('p1').className='RunningAnimation';
return;
}
else if(s=='Pause'){
document.getElementById('btn1').innerHTML='Play';
document.getElementById('p1').className='PauseAnimation';
return;
}
else return;
}
function f2(){
document.getElementById('div1').contentEditable=true;
}
</script>
</head>
<body >
<div class="demo" id="div1">
<div id="p1">
<br><br><br><br><br>
<p>
Hello!!!
<br>
Hello world!!!
<br>
Hello html!!!
<br>
Hello javascript!!!
<br>
Hello css!!!
<br>
Hello animation!!!
</p>
<br id="br1"><br><br>
</div>
</div>
<button onClick="f1()" id="btn1">Play</button>
<button onClick="">Stop</button>
<button onClick="f2()">Edit text</button>
</body>
</html>
提词器
.演示{
宽度：500px；
高度：500px；
}
.demo1
{
-webkit动画名称：示例；/*Chrome、Safari、Opera*/
-webkit动画持续时间：4s；/*Chrome、Safari、Opera*/
动画名称：示例；
动画持续时间：4s；
}
.demo1:悬停
{
-webkit动画播放状态：暂停；/*Chrome、Safari、Opera*/
动画播放状态：暂停；
}
.PauseAnimation{
-webkit动画播放状态：暂停；/*Chrome、Safari、Opera*/
动画播放状态：暂停；
}
.RunningAnimation{
-webkit动画播放状态：正在运行；/*Chrome、Safari、Opera*/
动画播放状态：运行；
}
@-webkit关键帧示例{
来自{transform:translateY（0px）；}
到{transform:translateY（-100px）；}
}
@关键帧示例{
来自{transform:translateY（0px）；}
到{transform:translateY（-100px）；}
}
函数f1（）
{
var标志=0；
var s=document.getElementById（'btn1'）.innerHTML；
如果（s==“播放”）{
document.getElementById（'btn1'）。innerHTML='Pause'；
如果（标志==0）{
document.getElementById（'p1'）。className='demo1'；
flag=flag+1；
返回；
}
document.getElementById（'p1'）.className='RunningAnimation'；
返回；
}
如果（s==‘暂停’），则为else{
document.getElementById（'btn1'）。innerHTML='Play'；
document.getElementById（'p1'）.className='PauseAnimation'；
返回；
}
否则返回；
}
函数f2（）{
document.getElementById（'div1'）。contentEditable=true；
}
你好
你好，世界！！！
你好，html！！！
你好，javascript！！！
你好，css！！！
你好，动画！！！
玩
停止
编辑文本
我的代码中有错误吗？在脚本中更改此错误
document.getElementById('p1').className='RunningAnimation';
document.getElementById('p1').classList.toggle('RunningAnimation');
document.getElementById('p1').classList.toggle('PauseAnimation');
document.getElementById('p1').className='PauseAnimation';
document.getElementById('p1').classList.toggle('RunningAnimation');
document.getElementById('p1').classList.toggle('PauseAnimation');