CODEWITHSUNDEEP
javascriptcssanimation
jagdish
jagdish

Reputation: 470

how to change css3 animation state

what i am trying to do is play and pause css3 animation
from this link: How to pause and resume CSS3 animation using JavaScript? i learned how to pause animation
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 ?
Here is my code::

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

is there any bug in my code ?

Upvotes: 2

Views: 332

Answers (1)

Patrik Kreh&#225;k
Patrik Kreh&#225;k

Reputation: 2683

In your script change this

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

to this

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

and also this

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

to this

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

You will not change class name, but toggle them. Here is working demo: jsFiddle

Upvotes: 2

Related Questions