HTML | DOM Style animationName Property
The animationName Property in HTML DOM is used to set or returns a name for @keyframes animation.
Syntax:
- It is used to set the animationName property:
object.style.animationName = "none|keyframename|initial|inherit"
- It is used to return the animationName property:
object.style.animationName
Property Value: It contains the name of the animation.
- none: When the animation is none. this is default value.
- keyframename: Name of keyframe for bind to the selector.
- initial: It is used to set default value.
- inherited: It is used to inheritproperty from parent.
Example-1:
html
<!DOCTYPE html><html><head> <title> HTML DOM animationName Property </title> <style> div { width: 100px; height: 100px; background: green; position: relative; -webkit-animation: move_1 2s infinite; /* For Chrome, Safari, Opera*/ animation: move_1 2s infinite; } /* For Chrome, Safari, Opera */ @-webkit-keyframes move_1 { from { left: 150px; } to { left: 350px; } } @keyframes move_1 { from { left: 150px; } to { left: 350px; } } /* For Chrome, Safari, Opera */ @-webkit-keyframes move_2 { from { left: 270px; width: 0px; height: 0px; } to { left: 270px; width: 100px; height: 100px; background: blue; } } @keyframes move_2 { from { left: 270px; width: 0px; height: 0px; } to { left: 270px; width: 100px; height: 100px; background: blue; } } </style></head><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM animationName Property</h2> <button onclick="Geeks()"> Click Here </button> <br> <br> <div id="GFG_DIV"></div> <script> function Geeks() { // Changing the animation name. document.getElementById( "GFG_DIV").style.WebkitAnimationName = "move_2"; // for Chrome, Safari, and Opera document.getElementById( "GFG_DIV").style.animationName = "move_2"; } </script></body></html> |
Output
- Before click on the button:
- After click on the button:
- Finally:
Example-2:
html
<!DOCTYPE html><html><head> <title> HTML DOM animationName Property </title> <style> div { width: 100px; height: 100px; background: green; position: relative; -webkit-animation: move_1 2s infinite; /* For Chrome, Safari, Opera*/ animation: move_1 2s infinite; } /* For Chrome, Safari, Opera */ @-webkit-keyframes move_1 { from { left: 150px; } to { left: 350px; } } @keyframes move_1 { from { left: 150px; } to { left: 350px; } } /* For Chrome, Safari, Opera */ @-webkit-keyframes move_2 { from { left: 270px; width: 0px; } to { left: 270px; width: 100px; background: blue; } } @keyframes move_2 { from { left: 270px; width: 0px; } to { left: 270px; width: 100px; background: blue; } } </style></head><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM animationName Property</h2> <button onclick="Geeks()"> Click Here </button> <br> <br> <div id="GFG_DIV"></div> <script> function Geeks() { // Changing the animation name. document.getElementById( "GFG_DIV").style.WebkitAnimationName = "move_2"; // for Chrome, Safari, and Opera document.getElementById( "GFG_DIV").style.animationName = "move_2"; } </script></body></html> |
Output
- Before click on the button:
- After click on the button:
- Finally:
Supported Browsers:
- Google Chrome: 43.0 and above
- Mozilla Firefox: 16.0 and above
- Internet Explorer: 10.0 and above
- Edge: 12.0 and above
- Opera: 30.0 and above
- Safari: 9.0 and above
Please Login to comment...