CSS | Propiedad animation-iteration-count

La propiedad animation-iteration-count en CSS se usa para especificar el número de veces que se repetirá la animación. Puede especificar como infinito para repetir la animación indefinidamente.

Sintaxis:

animation-iteration-count: number|infinite|initial|inherit;

El valor de la propiedad:

  • número: el valor de esta propiedad se utiliza para definir el número de veces que se debe reproducir una animación. El valor predeterminado es 1.
  • infinite: el valor de esta propiedad especifica que la animación debe reproducirse infinitas veces (para siempre).
  • initial: este valor de propiedad se utiliza para establecer esta propiedad en su valor predeterminado.
  • heredar: este valor se utiliza para heredar esta propiedad de su elemento principal.

Ejemplo: programa HTML para ilustrar el recuento de iteraciones de animación

<!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>                                                       

Navegador compatible: los navegadores compatibles con la propiedad animation-iteration-count se enumeran a continuación:

  • Google Chrome 43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Ópera 30.0
  • Safari 9.0

Publicación traducida automáticamente

Artículo escrito por vt_m y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *