animationIterationCount Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationIterationCount

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

Description

The animationIterationCount property sets or gets how many times an animation should be played.

Property Values

ValueDescription
number number as how many times an animation should be played. Default value is 1
infinite animation should be played infinite times
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 1
Return Value: A String, representing the animation-iteration-count property of an element
CSS VersionCSS3

Example

The following code shows how to change the animationIterationCount property of a <div> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {// w w  w . j a v  a  2 s. c  om
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 2s 1;  /* Chrome, Safari, Opera */
    animation: mymove 2s 2;
}

/* 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="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitAnimationIterationCount = "infinite";  // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationIterationCount = "infinite";
}
</script>

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

</body>
</html>

Related Tutorials