Changing -webkit-animation-play-state with 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.

回答1:

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

回答2:

look at http://jsfiddle.net/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 commented line for different anim

来源：https://stackoverflow.com/questions/10158448/changing-webkit-animation-play-state-with-javascript

标签

javascript

css

css3

webkit-animation