title: how to change css3 animation state
body: <p>what i am trying to do is <strong>play and pause</strong> css3 animation<br>
  from this link:
  <a href="https://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript">How to pause and resume CSS3 animation using JavaScript?</a>  i learned how to pause animation<br>
  i also achieved it but when i pauses animation it goes back to the initial state 
  how do i pause or resume from last state(pause or play) and not going back to initial state ?<br>
  Here is my code::</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Teleprompter&lt;/title&gt;
  &lt;style&gt;
  .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);}
  }
  &lt;/style&gt;
  &lt;script&gt;
      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;       
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body &gt;
  &lt;div class="demo"  id="div1"&gt;
  &lt;div id="p1"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;p&gt;
  Hello!!!
  &lt;br&gt;
  Hello world!!!
  &lt;br&gt;
  Hello html!!!
  &lt;br&gt;
  Hello javascript!!!
  &lt;br&gt;
  Hello css!!!
  &lt;br&gt;
  Hello animation!!!
  &lt;/p&gt;
  &lt;br id="br1"&gt;&lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;button onClick="f1()" id="btn1"&gt;Play&lt;/button&gt;
  &lt;button onClick=""&gt;Stop&lt;/button&gt;
  &lt;button onClick="f2()"&gt;Edit text&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>is there any bug in my code ?</p>