animationName Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationName

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

Description

The animationName property sets or gets a name for the @keyframes animation.

Property Values

ValueDescription
none Default value. No animation
keyframename name of the keyframe to use in the selector
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

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

Example

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

Demo Code

ResultView the demo in separate window 

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

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

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

/* Chrome, Safari, Opera */
@-webkit-keyframes myNEWmove {
    from {width: 0px;}
    to {width: 500px; background: blue;}
}

@keyframes myNEWmove {
    from {width: 0px;}
    to {width: 500px; background: blue;}
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitAnimationName = "myNEWmove"; // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationName = "myNEWmove";
}
</script>
<div id="myDIV"></div>

</body>
</html>

Related Tutorials