HTML DOM Style animationIterationCount Property Last Updated : 15 Jun, 2023 Comments Improve Suggest changes Like Article Like Report The Style animationIterationCount property in HTML DOM is used to set or return how many times an animation should be played. Syntax: It is used to return the animationIterationCount property.object.style.animationIterationCountIt is used to set the animationIterationCount property.object.style.animationIterationCount = "number|infinite|initial| inherit" Property Values: number: It is used to set how many times the animation will play. Its default value is 1.infinite: It sets the animation will play infinite times.initial: It sets the animationIterationCount property to its default value.inherit: This property value is inherited from its parent element. Example 1: In this example, we will use animationIterationCount property HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style animationIterationCount Property </title> <style> div { width: 80px; height: 80px; background: lightgreen; position: relative; /* For Chrome, Safari, Opera browsers */ -webkit-animation: mymove 2s 1; animation: mymove 2s 1; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from { left: 0px; top: 0px; } to { left: 250px; top: 250px; } } @keyframes mymove { from { left: 0px; top: 0px; } to { left: 250px; top: 250px; background-color: green; } } </style> </head> <body> <p> Click on the button to set animation iteration count! </p> <button onclick="myGeeks()"> Click Here! </button> <br> <script> /* For Chrome, Safari, and Opera browsers */ function myGeeks() { document.getElementById("GFG") .style.WebkitAnimationIterationCount = "10"; document.getElementById("GFG") .style.animationIterationCount = "10"; } </script> <div id="GFG"></div> </body> </html> Output: Example 2: In this example, we will use animationIterationCount property HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style animationIterationCount Property </title> <style> div { width: 200px; height: 110px; background: green; text-align: center; padding-top: 50px; position: relative; /* Chrome, Safari, Opera */ -webkit-animation: mymove 2s 2; animation: mymove 2s 2; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from { left: 400px; } to { left: 0px; } } @keyframes mymove { from { left: 400px; } to { left: 0px; } } </style> </head> <body> <p> Click on the button to set animation iteration count! </p> <button onclick="myGeeks()"> Click Here! </button> <br> <script> function myGeeks() { /* For Chrome, Safari, and Opera browsers */ document.getElementById("GFG") .style.WebkitAnimationIterationCount = "infinite"; document.getElementById("GFG") .style.animationIterationCount = "infinite"; } </script> <br> <div id="GFG"> Style animationIterationCount Property </div> </body> </html> Output: Supported Browsers: The browser supported by DOM Style animationIterationCount property are listed below: Chrome 43.0Edge 12.0Internet Explorer 10.0Firefox 16.0Opera 30.0Safari 9.0 Comment More infoAdvertise with us S SHUBHAMSINGH10 Follow Improve Article Tags : Web Technologies HTML Web technologies HTML-DOM HTML-Property +1 More Similar Reads 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 HTML | DOM WheelEvent deltaY Property The WheelEvent.deltaY property in HTML is used to return a positive double value when the web page is scrolled down, and a negative double value when the page is scrolled up, or else it returns zero. It is a read-only property. Syntax: event.deltaY Return Value: It returns a double value which indic 1 min read HTML DOM Style borderBottomRightRadius Property The DOM borderBottomRightRadius property is used to select any element from the DOM tree and set the style of the radius of the bottom-right corner of its border. Syntax : It returns the borderBottomRightRadius Property.object.style.borderBottomRightRadiusIt is used to set the borderBottom property. 2 min read Like