Hi I have been trying to figure out how to change my css3 -webkit-animation-play-state from paused to running by clicking on another div. Does any one know how I would do this?? Im assuming I would need to use JavaScript.

Hi I have been trying to figure out how to change my css3 -webkit-animation-play-state from paused to running by clicking on another div. Does any one know how I would do this?? Im assuming I would need to use JavaScript.

• javascript
• css
• webkit-animation

Share Improve this question Follow asked Apr 15, 2012 at 0:08 JohnJohn 1111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I don't think you're able to do it unless you use JavaScript. Using JavaScript, you would have to fetch the style.webkitAnimationPlayState of the element you wish to change. If it's an empty string, then it is set to the inital value, which is "running".

In the example code, clickDiv is the div you click and animationDiv is the div whose webkit-animation-play-state is getting changed:

clickDiv.addEventListener("click", function(){
    if (animationDiv.style.webkitAnimationPlayState == "paused") {
        animationDiv.style.webkitAnimationPlayState = "running";
    }else if(animationDiv.style.webkitAnimationPlayState == "running" || animationDiv.style.webkitAnimationPlayState == ""){
        animationDiv.style.webkitAnimationPlayState = "paused"; // assuming you want to toggle
    }
    console.log(animationDiv.style.webkitAnimationPlayState);
})?

Demo Here

look at http://jsfiddle/JCzpd/37/

var animationDiv = document.getElementById("aD");
var clickDiv = document.getElementById("cD");
clickDiv.addEventListener("click", function(){
    if (animationDiv.style.animation == "") {
animationDiv.style.animation = " anim .5s forwards";
//animationDiv.style.animation = " anim running  .1s infinite";
    }else{
animationDiv.style.animation = ""; // assuming you want to toggle
    }
});

 #aD{ background-color:green;
 height:30px;
 margin:2px 0 5px 2px;}
 #cD{background-color:blue;}
@keyframes anim{
   0%{ background-color:green;}
  100%{ background-color:red;}
}
#aD:hover{animation: anim 1s infinite;
cursor:pointer;}

<div id="aD">animated div</div>
<div id="cD">click div</div>

change mented line for different anim