Animaciones de entrada

Las animaciones de entrada hacen que los elementos aparezcan en lugar de "saltar" a la pantalla. Se usan en héroes, tarjetas, modales y listas para dar sensación de fluidez y dirigir la mirada.

Concepto: @keyframes y animation

Una animación CSS tiene dos partes:

1. @keyframes: define los pasos (de dónde a dónde).
2. animation: aplica esos pasos a un elemento con una duración, una curva y otras opciones.

/* 1. Definir los pasos */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2. Aplicarlos */
.tarjeta {
  animation: aparecer .8s cubic-bezier(.22, 1, .36, 1) both;
  /*         nombre   duración  curva (easing)          fill-mode */
}

Las propiedades más importantes del atajo animation:

Propiedad	Qué hace	Valores típicos
animation-duration	Cuánto dura	.3s, 800ms
animation-timing-function	La curva de velocidad	ease, ease-out, linear, cubic-bezier(...), steps(n)
animation-delay	Cuánto espera antes de empezar	.2s (acepta negativos: empieza "a mitad")
animation-iteration-count	Cuántas veces se repite	1, 3, infinite
animation-fill-mode	Qué estilo tiene antes/después	both (el más útil en entradas)

¿Por qué both?

Sin animation-fill-mode: both, un elemento con animation-delay se ve visible durante el retraso y luego "parpadea" al estado from. Con both aplica el from desde el inicio y conserva el to al terminar.

Las 6 entradas básicas

Fade, slide up, slide left, zoom, flip y bounce. Pulsa Repetir animaciones para verlas otra vez.

Fade, slide, zoom, flip y bounce

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo funciona:

• Todas comparten las mismas propiedades de animation en .caja; cada clase sólo cambia animation-name.
• Flip usa perspective(600px) dentro del transform para que el giro en X se vea en 3D.
• Bounce tiene más de dos pasos: crece un poco de más (scale(1.08)), se encoge (.95) y se asienta en 1. Ese "pasarse y volver" es lo que da sensación de rebote.
• El retraso escalonado se hace con :nth-child().

Curvas de animación (easing)

Para entradas usa curvas que frenan al final (ease-out o cubic-bezier(.22, 1, .36, 1)): el elemento llega rápido y se asienta suave. Para salidas usa ease-in. linear sólo para cosas que giran sin parar (spinners). Experimenta con curvas en cubic-bezier.com.

Lista con efecto stagger

"Stagger" significa escalonado: cada elemento empieza un poco después que el anterior. El truco profesional es pasar el índice como variable CSS y calcular el retraso con calc():

Lista escalonada (stagger)

✏️ Editar en el Playground↗ Abrir en pestaña nueva

<li style="--i: 0">…</li>
<li style="--i: 1">…</li>
<li style="--i: 2">…</li>

.lista li {
  animation: entrar .6s ease-out both;
  animation-delay: calc(var(--i) * 90ms); /* 0ms, 90ms, 180ms… */
}

Si generas la lista con JavaScript, asigna el índice al crearla:

items.forEach((item, i) => {
  const li = document.createElement('li');
  li.style.setProperty('--i', i);
  li.textContent = item;
  lista.appendChild(li);
});

Error común: retrasos demasiado largos

Con 20 elementos y 200 ms de retraso, el último tarda 4 segundos en aparecer. Mantén el retraso entre 50 y 100 ms, o limita el escalonado: calc(min(var(--i), 8) * 80ms).

Reiniciar una animación

Una animación CSS sólo se ejecuta cuando el elemento aparece o cuando cambia animation-name. Para repetirla desde JavaScript tienes dos opciones:

// Opción 1: reemplazar el elemento por una copia (lo que hacen los demos)
el.replaceWith(el.cloneNode(true));

// Opción 2: quitar la clase, forzar un reflow y volver a ponerla
el.classList.remove('animar');
void el.offsetWidth;         // fuerza al navegador a "olvidar" la animación
el.classList.add('animar');

Accesibilidad

@media (prefers-reduced-motion: reduce) {
  .caja { animation-name: fade-in !important; animation-duration: .01ms !important; }
}

Usamos .01ms en lugar de none para que el evento animationend se siga disparando (por si tu JavaScript depende de él).

Ejercicios

1. Crea una entrada slide-down que venga desde arriba con translateY(-40px).
2. Haz que las tarjetas de la lista entren desde la derecha y con un ligero giro (rotate(4deg)).
3. Combina stagger con bounce-in para una cuadrícula de 9 iconos.

Ver solución del ejercicio 3

.icono {
  animation: bounce-in .6s ease-out both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(.3); }
  50%  { opacity: 1; transform: scale(1.08); }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

Resumen

• @keyframes define los pasos; animation los aplica.
• Usa animation-fill-mode: both en entradas con retraso.
• Stagger = índice en --i + animation-delay: calc(var(--i) * 90ms).
• Curvas ease-out para entrar, ease-in para salir.
• Siempre incluye prefers-reduced-motion.