Javascript DOM CSS Style animation Property

Introduction

Changing the animation of a <div> element, using the shorthand property: 

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

Click the button to change the value of the animation property.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from   w ww.  j ava  2 s .co m
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 1s infinite;
}

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

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

<script>
function myFunction() {
  document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
}
</script>
<div id="myDIV"></div>

</body>
</html>

The animation property is a shorthand property for six of the animation properties:

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

We should set the animationDuration property, otherwise the duration is 0, and the animation will never be played.

Property Values

Value Description
animationName the name of the keyframe binded to the selector
animationDuration how many seconds or milliseconds an animation takes to complete
animationTimingFunction the speed curve of the animation
animationDelay a delay before the animation will start
animationIterationCount how many times an animation should be played
animationDirection the animation should play in reverse on alternate cycles
animationFillMode what values to use by the animation outside the time it is executing
animationPlayState whether the animation is running or paused
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The animation property default Value is: 

none 0 ease 0 1 normal none running

The animation property return a String representing the animation property of an element.




PreviousNext

Related