Changing -webkit-animation-play-state with javascript

javascript css webkit-animation
John picture John · Apr 15, 2012 · Viewed 7.1k times · Source

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.

Answer

blocco picture blocco · Apr 15, 2012

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

Related questions

Updating animation-duration in Javascript

After changing the animation-duration (or in this case, -webkit-animation-duration) property via JavaScript with setProperty("-webkit-animation-duration", value + "s"), I see the change in the element inspector in Chrome, but the actual animation speed doesn't change. In addition, if I manually change …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More