animationDuration Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationDuration

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

Description

The animationDuration property sets time in seconds or milliseconds to complete an animation in one cycle.

Property Values

Value Description
timelength to finish the animation. Default value is 0, meaning there will be no animation
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 0
Return Value: A String, representing the animation-duration property of an element
CSS VersionCSS3

The following code shows how to change the animationDuration 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 5s infinite;  /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* 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.WebkitAnimationDuration = "1s";  // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationDuration = "1s";
}
</script>


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

</body>
</html>

Related Tutorials