animation Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animation

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

Description

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

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

Property Values

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

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

Demo Code

ResultView the demo in separate window 

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

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

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

</body>
</html>

Related Tutorials