Skip to content
Related Articles

Related Articles

CSS | animation-iteration-count Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022

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. 


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 (forever).
  • 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>
            CSS | animation-iteration-count Property
            .geeks {
                font-size: 40px;
                font-family:Times New Roman;
            .geeks1 {
                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;
        <div class = "geeks">
        <div class = "geeks1">
            A computer science portal for geeks
        <!-- Animation of the text inside the h2 tag 
             below will be repeated twice only -->
        <h2 id="one">
            This text changes its color two times.
        <!-- Animation of the text inside the h2 tag
             below will be repeated infinitely -->
        <h2 id="two">
            This text changes its color infinite times.



Supported Browser: The browser supported by animation-iteration-count property are listed below:

  • Google Chrome 43.0 and above
  • Edge 12.0 and above
  • Internet Explorer 10.0 and above
  • Firefox 16.0 and above
  • Opera 30.0 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!