如何改变CSS3动画状态

什么，我试图做的是发挥，从这个链接暂停 CSS3动画
： How to pause and resume CSS3 animation using JavaScript?我学会了如何暂停动画
我也实现了，但是当我暂停动画不言而喻回到初始状态我该如何暂停或从上一个状态恢复（暂停或播放）并且不回到初始状态？
这里是我的代码::如何改变CSS3动画状态

<!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>

有没有在我的代码的任何错误？

来源

2016-09-27 jagdish

在你的脚本改变这种

document.getElementById('p1').className='RunningAnimation';

这个

document.getElementById('p1').classList.toggle('RunningAnimation');

而且这个

document.getElementById('p1').className='PauseAnimation';

这个

document.getElementById('p1').classList.toggle('PauseAnimation');

您不会更改班级名称，但可以切换它们。这里是工作演示：jsFiddle

来源

2016-09-27 19:08:09 debute

非常感谢!!!!! – jagdish

不客气。 – debute

如何改变CSS3动画状态

回答

相关问题