Javascript Reference - HTML DOM Style animation Property








The animation property gets and sets the shorthand property for six of the animation properties:

  • animationName
  • animationDuration
  • animationTimingFunction
  • animationDelay
  • animationIterationCount
  • animationDirection




Browser Support

animation Yes (WebkitAnimation) 10 Yes Yes (WebkitAnimation) Yes (WebkitAnimation)

Syntax

Return the animation property:

var v = object.style.animation;

Set the animation property:

object.style.animation='name duration timingFunction delay iterationCount direction fillMode playState';

Property Values

Value Description
animationName Set the keyframe
animationDuration Set the duration
animationTimingFunction Set the speed curve
animationDelay Set a delay before start
animationIterationCount Set how many times an animation should be played
animationDirection Set whether to play the animation in in reverse
animationFillMode Set what values to use when animation is not executing
animationPlayState Set whether the animation is running or paused
initial Set to default value
inherit Inherit from parent element.




Technical Details

Default Value: none 0 ease 0 1 normal none running
Return Value: A string representing the animation property
CSS Version CSS3

Example

The following code shows how to change the animation of a <div> element, using the shorthand property.


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

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

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

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes newAnim {
    from {top: 0px;}
    to {top: 200px;}
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitAnimation = "newAnim 4s 2"; // Code for Chrome, Safari and Opera
    document.getElementById("myDIV").style.animation = "newAnim 4s 2";
}
</script>
<div id="myDIV"></div>
</body>
</html>

The code above is rendered as follows: