A veces, el CSS no se comporta como se esperaba. Tome las animaciones CSS, por ejemplo: después de crear una, es posible que desee que su animación se reproduzca una y otra vez.
Sin embargo, éste no es el caso. De forma predeterminada, la animación se ejecutará una vez y luego se detendrá. ¿Qué pasa si queremos que nuestra animación se repita varias veces o infinitamente para algo como la animación de carga? Para hacer esto, necesitamos establecer el número de iteraciones con número de iteraciones-animaciones propiedad.
Puede tener uno de los nombres más largos entre las propiedades CSS, pero número de iteraciones-animaciones No es demasiado difícil de entender, y una vez que sepa cómo funciona, puede crear animaciones repetidas para atraer a sus espectadores. Miremos más de cerca.
¿Cuál es el número de iteraciones de la animación?
los número de iteraciones-animaciones La propiedad CSS determina cuántas veces se reproducirá la secuencia de animación. Si se completa el número de iteraciones, la animación se detendrá después del número de ciclos especificado. La regla se escribe de la siguiente manera:
animation-iteration-count: infinite | <number> | initial | inherit;
valores de número de iteración de animación
los número de iteraciones-animaciones una propiedad puede tomar varios valores. Sus principales valores son infinito y
infinito
Si se asigna número de iteraciones-animaciones valor infinitola animación se repetirá indefinidamente. Este es el mejor valor para una animación que no desea detener por su cuenta.
ver la pluma número de iteraciones-animaciones: infinito de Christina Perricone (@hubspot) en CódigoPen.
Valor numérico para número de iteraciones-animaciones hace que la animación se repita un número específico de veces. Por ejemplo, valor 3 repetirá la animación tres veces.
ver la pluma número de iteraciones de animación: número de Christina Perricone (@hubspot) en CódigoPen.
Si el valor por número de iteraciones-animaciones no está definido, el valor predeterminado es 1y la animación se repite una vez. Valor 0 impide que se reproduzca la animación.
También puede usar un decimal para detener la animación antes de que se complete su último ciclo. Por ejemplo, valor 2.5 provocará un ciclo de animación dos veces y media.
ver la pluma número de iteraciones-animaciones: decimal de Christina Perricone (@hubspot) en CódigoPen.
Inicial
los Inicial valor establece el valor número de iteraciones-animaciones por defecto, 1.
heredar
Si heredar es específico, número de iteraciones-animaciones heredará el valor de su padre.
Múltiples valores para el número de animaciones-iteraciones
En los ejemplos anteriores, solo asignamos un valor a número de iteraciones-animacionespero esta propiedad (como otras propiedades de animación CSS) también puede manejar múltiples valores. Esto le permite asignar diferentes contadores de iteraciones a diferentes animaciones.
Para agregar varios valores a número de iteraciones-animacionesagregue valores separados por comas, por ejemplo:
animation-iteration-count: 3, 5, infinite;
Mostrando múltiples valores para número de iteraciones-animaciones (y otras propiedades de animación CSS) asigna cada valor al valor listado con nombre-de-animación propiedad según el orden en la lista. el primer valor número de iteraciones-animaciones se trata del primer valor nombre-de-animaciónsegundo valor número de iteraciones-animaciones se trata del segundo valor nombre-de-animacióny así.
He aquí un ejemplo del uso de muchos número de iteraciones-animaciones valores para tres propiedades animadas diferentes:
ver la pluma número de iteración de animación: valores múltiples de Christina Perricone (@hubspot) en CódigoPen.
Atajo CSS para contar iteraciones de animación
También puede especificar el número de iteraciones de la animación con animación Propiedad truncada de CSS para usar menos líneas de código. Por ejemplo, en el siguiente código:
animation: example 3s 2s 5 ease;
… valor 5 establece el número de iteraciones para la animación.
ver la pluma número de iteraciones-animaciones: abreviatura de Christina Perricone (@hubspot) en CódigoPen.
Bucle sus animaciones CSS
Con una línea adicional de código CSS, puede reproducir fácilmente animaciones sin fin durante un número específico de iteraciones. Por ejemplo, puede aplicar un movimiento suave para que el elemento parezca «flotar» en la página, o aplicar un divertido efecto de movimiento al hacer clic en un botón. Tienes control total sobre tus animaciones y estilos, de eso se trata CSS.
