HTML DOM Style animationDuration Property Last Updated : 13 Jun, 2023 Comments Improve Suggest changes Like Article Like Report The Style animationDuration property in HTML DOM is used to set the time interval to complete one cycle of an animation. Syntax: It returns the animationDuration property.object.style.animationDurationIt sets the animationDuration property.object.style.animationDuration = "time|initial|inherit" Return Values: It returns a string that represents the animation-duration property of an element Property Values: time: It is used to specify the length of time for which an animation will complete one cycle. The default value is 0 i.e. no animation will display.initial: It is used to set the style animationDuration property to its default value.inherit: It inherits style animationDuration property from its parent. Vendor Prefixes: For browser compatibility, many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera, -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera, etc. If the browser doesn't support any extension, it will simply ignore it. Example 1: In this example, we will use DOM Style animationDuration Property. HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style animationDuration Property </title> <style> div { width: 100px; height: 100px; background: #32CD32; position: relative; /*For Chrome, Safari, Opera browsers */ /* animation name geeks */ /* infinite animation iteration */ -webkit-animation: geeks 5s infinite; animation: geeks 5s infinite; } /* Used for Chrome, Safari, Opera */ @-webkit-keyframes geeks { from { left: 0px; top: 20px; } to { left: 300px; top: 20px; } } @keyframes geeks { from { left: 0px; top: 20px; } to { left: 300px; top: 20px; } } </style> </head> <body> <button onclick="myGeeks()"> Click the button to speed up the duration of animation </button> <script> function myGeeks() { /* For Chrome, Safari, and Opera browsers */ document.getElementById("GFG").style.WebkitAnimationDuration = "1s"; document.getElementById("GFG").style.animationDuration = "1s"; } </script> <div id="GFG"> GeeksforGeeks </div> </body> </html> Output: Example 2: In this example, we will use DOM Style animationDuration Property. HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style animationDuration Property </title> <style> div { width: 100px; height: 100px; background: #32CD32; position: relative; /* For Chrome, Safari, Opera */ /* infinite animation iteration */ -webkit-animation: mymove 5s infinite; animation: mymove 5s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from { left: 0px; background-color: white; } to { left: 200px; background-color: #32CD32; } } @keyframes myanim { from { left: 0px; background-color: white; } to { left: 200px; background-color: #32CD32; } } </style> </head> <body> <button onclick="myGeeks()"> Click the button to speed up the duration of animation </button> <script> function myGeeks() { document.getElementById("GFG").style.WebkitAnimationDuration = "1s"; document.getElementById("GFG").style.animationDuration = "1s"; } </script> <div id="GFG"> The animation-duration Property </div> </body> </html> Output: Supported browsers: The browser supported by Style animationDuration Property are listed below: Firefox 16.0 and aboveOpera 30.0 and aboveGoogle Chrome 43.0 and aboveEdge 12.0 and aboveInternet Explorer 10 and aboveSafari 9.0 and above Comment More infoAdvertise with us A abhishek7 Follow Improve Article Tags : Web Technologies HTML Web technologies HTML-DOM HTML-Property +1 More Similar Reads HTML | DOM Style backgroundRepeat Property The backgroundRepeat property in HTML DOM is used to set or return the CSS backgroundRepeat property. It also checks whether the background-image is repeated or not. Syntax: It is used to returns the backgroundRepeat property.object.style.backgroundRepeat It is used to set the backgroundRepeat prope 2 min read HTML | DOM DList Object The DOM DList Object is used to represent the HTML <dl> tag. The Dlist element is accessed by getElementById(). Syntax: document.getElementById("ID");< Where “id†is the ID assigned to the “dl†tag.Example-1: html <!DOCTYPE html> <html> <head> <title>HTML DOM DList O 2 min read HTML DOM insertBefore() Method The insertBefore() method in HTML DOM is used to insert a new node before the existing node as specified by the user. Syntax: node.insertBefore( newnode, existingnode ) Parameters: This method accepts two parameters as mentioned above and described below: newnode: It is the required parameter. This 2 min read HTML DOM attributes Property The attributes property in HTML DOM returns the group of node attributes specified by NamedNodeMap objects. The NamedNodeMap object represents the collection of attribute objects and can be accessed by index number. The index number starts at 0. Syntax: node.attributes Return Value: It returns the N 2 min read HTML| DOM Variable Object The DOM Variable Object is used to represent HTML <var> element. The var element is accessed by getElementById(). Syntax: var element = document.getElementById("ID"); Where “id†is the ID assigned to the “var†tag. Example-1: HTML <!DOCTYPE html> <html> <head> <title>HT 2 min read HTML DOM Style borderBottomLeftRadius Property The borderBottomLeftRadius property in HTML DOM is used to set or return the radius of the border of the bottom-left corner. Syntax: It returns the borderBottomLeftRadius Property.object.style.borderBottomLeftRadiusIt is used to set the borderBottomLeftRadius property.object.style.borderBottomLeftRa 2 min read HTML DOM Dialog Object The DOM Dialog Object is used to represent the HTML <dialog> element. The Dialog element is accessed by getElementById(). It is used in HTML5. Syntax: document.getElementById("ID"); Where “id†is the ID assigned to the “Dialog†tag. Example 1: In this example, we will use DOM Dialog Object. HT 1 min read HTML DOM InputEvent inputType Property The inputType property is used to know the type of change that is made to a particular input field or any other editable content by the event. It is a read-only property. Syntax: event.inputType Return Value: It returns a string that indicates the type of input entered. Example: In this example, we 1 min read HTML DOM DFN Object The DOM DFN Object is used to represent the HTML <dfn> tag. The DFN element is accessed by getElementById(). Syntax: document.getElementById("ID"); Where “id†is the ID assigned to the “dfn†tag. Example 1: In this example, we will use DOM DFN Object. html <!DOCTYPE html> <html> 1 min read HTML DOM Style animation Property The style animation property makes it possible to animate transitions from one CSS style to another CSS style. It configures the timing, delay, duration, and other details of how the sequence of animation should progress. The animation contains two components, one is CSS describing the component and 3 min read Like