CSS | animation-iteration-count Property

06 Aug, 2019
The animation-iteration-count property in CSS is used to specify the number of times the animation will be repeated. It can specify as infinite to repeat the animation indefinitely.
Syntax:
animation-iteration-count: number|infinite|initial|inherit;
Property Value:
number: This property value is used to define the number of times an animation should be played. The default value is 1.
infinite: This property value specifies that the animation should be played infinite times (for ever).
initial: This property value is used to set this property to its default value.
inherit: This value is used to inherit this property from its parent element.
Example: HTML program to illustrate animation-iteration-count
<!DOCTYPE html> <html>     <head>         <title>            CSS | animation-iteration-count Property        </title>        <style>             .geeks {                 font-size: 40px;                 text-align:center;                 font-weight:bold;                 color:#090;                 padding-bottom:5px;                 font-family:Times New Roman;             }                           .geeks1 {                 font-size:17px;                 font-weight:bold;                 text-align:center;                 font-family:Times New Roman;             }                           #one {                 animation-name: example;                 animation-duration: 2s;                                   /* Animation will be repeated twice */                animation-iteration-count: 2;             }                           #two {                 animation-name: example;                 animation-duration: 2s;                                   /* Animation will be repeated infinitely */                animation-iteration-count: infinite;             }             @keyframes example {                 from {                     background-color: orange;                 }                 to {                     background-color: white;                 }             }         </style>     </head>     <body>         <div class = "geeks">            GeeksforGeeks        </div>                   <div class = "geeks1">            A computer science portal for geeks        </div>                  <!-- Animation of the text inside the h2 tag               below will be repeated twice only -->        <h2 id="one">            This text changes its color two times.        </h2>                   <!-- Animation of the text inside the h2 tag              below will be repeated infinitely -->        <h2 id="two">            This text changes its color infinite times.        </h2>     </body> </html>                                                       
Supported Browser: The browser supported by animation-iteration-count property are listed below:
Google Chrome 43.0
Internet Explorer 10.0
Firefox 16.0
Opera 30.0
Safari 9.0
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property