animationPlayState Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationPlayState

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. animationPlayState

Description

The animationPlayState property sets whether the animation is running or paused.

Property Values

Value Description
running Default value. animation is running
paused pause the animation
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: running
Return Value: A String, representing the animation-play-state property of an element
CSS VersionCSS3

Example

Pausing an animation:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from w  ww.ja  v a  2  s. com*/
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 2s infinite;  /* Chrome, Safari, Opera */
    -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
    animation: mymove 2s infinite;
    animation-play-state: paused;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
</style>
</head>
<body>

<button onclick="myPlayFunction()">Play</button>
<button onclick="myPauseFunction()">Pause</button>

<script>
function myPlayFunction() {
    document.getElementById("myDIV").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationPlayState = "running";
}

function myPauseFunction() {
    document.getElementById("myDIV").style.WebkitAnimationPlayState = "paused"; // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationPlayState = "paused";
}
</script>


<div id="myDIV"></div>

</body>
</html>

Related Tutorials