8.1 Propiedad animation-iteration-count
Las animaciones CSS permiten crear efectos visuales dinámicos, mejorando la interfaz de usuario. Ahora vamos a
ver dos propiedades clave que controlan los ciclos de animaciones: animation-iteration-count y animation-direction.
La propiedad animation-iteration-count define cuántas veces se reproducirá una animación. Esta propiedad permite
controlar si la animación se reproducirá una vez, varias veces o infinitamente.
Sintaxis:
element {
animation-iteration-count: number | infinite;
}
Dónde:
number: número de reproducciones de la animación (por ejemplo, 1, 2, 3, etc.)infinite: la animación se reproducirá infinitamente
Ejemplo:
<div class="box"></div>
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Explicación del código:
@keyframes bounce: define una animación que levanta el elemento hacia arriba y luego lo regresa a su posición originalanimation-iteration-count: infinite: establece la reproducción infinita de la animación
8.2 Propiedad animation-direction
La propiedad animation-direction define la dirección de reproducción de la animación. Permite especificar
si la animación se reproducirá en dirección normal, reversa o alternará entre ambas direcciones.
Sintaxis:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Dónde:
normal: la animación se reproduce en dirección normal (por defecto)reverse: la animación se reproduce en dirección inversaalternate: la animación alterna entre dirección normal y dirección inversaalternate-reverse: la animación comienza en dirección inversa, luego alterna entre direcciones inversa y normal
Ejemplo
Reproducción normal e inversa:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Explicación del código:
.box1: la animación se reproduce en dirección normal.box2: la animación se reproduce en dirección inversa
Alternando direcciones:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Explicación del código:
.box1: la animación alterna entre direcciones normal e inversa.box2: la animación comienza en dirección inversa, luego alterna entre direcciones inversa y normal
8.3 Ejemplo de uso de ambas propiedades
Elemento oscilante
- Este ejemplo muestra un elemento oscilante que se mueve de derecha a izquierda:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemento oscilante</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
@keyframes swing: define una animación que rota el elemento.box: elemento con la animaciónswingaplicada, duración de 1 segundo, reproducción infinita y comenzando en dirección inversa
GO TO FULL VERSION