@keyframes: tu primera animación

Las transiciones del módulo 10 tienen un requisito: algo debe CAMBIAR (un hover, un foco) para que exista el viaje. @keyframes elimina el requisito — la animación vive sola, arranca cuando el elemento aparece y se repite las veces que quieras. Al final de esta lección tendrás un elemento respirando en pantalla sin que nadie lo toque.

Tú marcas las poses, el navegador dibuja el resto

Las dos piezas: la coreografía y el bailarín

Detalles que importan desde el día uno:

• @keyframes define; animation ejecuta. Una coreografía puede bailarla cualquier cantidad de elementos.
• Los porcentajes son del TIEMPO de la animación, no de tamaño: 50% de una animación de 3s ocurre al segundo y medio.
• from y to son alias de 0% y 100%.
• Para un loop suave, el último fotograma debe IGUALAR al primero — si 100% no vuelve a scale(1), cada repetición arranca con un salto seco. Es el bug número uno de las animaciones en loop.

Los tres clásicos

<div class="fila">
<figure><div class="bola pulso"></div><figcaption>pulso</figcaption></figure>
<figure><div class="bola respira"></div><figcaption>respiración</figcaption></figure>
<figure><div class="bola flota"></div><figcaption>flotación</figcaption></figure>
</div>
<p class="nota">Nadie las toca: viven solas. Tres coreografías distintas sobre el mismo div.</p>

body { font-family: system-ui; padding: 32px; background: #f8fafc; }
.fila { display: flex; gap: 44px; }
figure { margin: 0; text-align: center; }
.bola { width: 64px; height: 64px; border-radius: 50%; background: #6d28d9; }
@keyframes pulso {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.75; }
}
.pulso { animation: pulso 1s ease-in-out infinite; }
@keyframes respirar {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.respira { animation: respirar 3.5s ease-in-out infinite; }
@keyframes flotar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.flota { animation: flotar 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bola { animation: none; } }
figcaption { font-size: 13px; color: #64748b; margin-top: 12px; }

Míralas de cerca: las tres usan SOLO transform y opacity (la regla formal de rendimiento llega en la lección 3, pero el hábito empieza hoy), las tres son ease-in-out (el vaivén natural: acelera al salir de un extremo, frena al llegar al otro) e infinite, y en las tres el 0% y el 100% son idénticos — por eso puedes mirarlas un minuto sin detectar dónde "reinicia" el loop. Fíjate también en el atajo 0%, 100% { ... }: dos poses iguales se declaran juntas, separadas por coma.

La diferencia entre pulso y respiración no es el código — es la INTENCIÓN: el pulso (1s, con opacidad) llama la atención: "hay una notificación". La respiración (3.5s, sutil) da vida sin pedir atención: "estoy vivo, sigue en lo tuyo". Misma técnica, mensajes opuestos.

Mini-reto

Dale un latido a "El Observador": el punto rojo de "EN VIVO" junto a la noticia principal con la animación pulso, y el botón de "volver arriba" flotando suavemente. Después rompe el loop a propósito: cambia el 100% del pulso a scale(1.3) y encuentra el salto seco a simple vista. Ahora ya sabes qué buscar cuando una animación ajena "tictaquea".

Qué sigue

Escribiste la coreografía. Pero animation tiene más perillas que duración y repeticiones: dirección de ida y vuelta, qué pasa ANTES de empezar y DESPUÉS de terminar, pausa y reanudación. La lección que viene es el panel de control completo.