Las animaciones en CSS te permiten dar vida a tus elementos sin depender de un trigger como el hover. A diferencia de las transiciones, una animación se ejecuta sola en cuanto la programas con @keyframes, ideal para efectos de pulso, rotación, rebote o un spinner de carga.

Si vienes del mundo de las transiciones y transformaciones, este salto te va a abrir un universo nuevo: animar elementos de forma autónoma, en bucle infinito y con control milimétrico sobre cada fotograma.

Qué son los keyframes y cómo funcionan en CSS

Los keyframes son los fotogramas clave de tu animación. Tú defines qué pasa en cada momento (0%, 50%, 100%) y el navegador interpola el resto.

¿Qué es un keyframe en CSS? Es una regla que define los estados intermedios y finales de una animación, marcando porcentajes de tiempo donde el elemento cambia de apariencia o posición.

La estructura básica siempre es la misma: declaras @keyframes nombreAnimacion, defines los porcentajes y luego aplicas la animación a una clase con la propiedad animation.

Cómo preparar el contenedor base

Antes de animar, necesitas un contenedor con estilos consistentes. La clase .box se configura con width y height de 100 píxeles, background-color azul #3498db, color de texto blanco, display: flex con align-items: center y justify-content: center para centrar el contenido, margin de 20 píxeles y border-radius de 10 píxeles [2:30].

Cómo hacer una animación de pulso con scale

La animación pulse hace que tu elemento crezca y vuelva a su tamaño original de forma cíclica. Se construye con tres fotogramas: inicio, mitad y final [4:10].

css @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

.pulse { animation: pulse 2s ease-in-out infinite; }

En el 0% el elemento mantiene su tamaño normal con scale(1). En el 50% crece un 20% con scale(1.2). En el 100% regresa a scale(1). La propiedad animation recibe el nombre, la duración (2 segundos), el timing function ease-in-out para suavizar inicio y final, y la palabra clave infinite para que se repita sin parar.

¿Qué hace ease-in-out en una animación? Suaviza el arranque y el cierre del movimiento, evitando cambios bruscos de velocidad. El elemento acelera al inicio y desacelera al final.

Cómo rotar un elemento con CSS de forma infinita

Para una rotación continua solo necesitas dos fotogramas: el inicial sin giro y el final con vuelta completa [7:45].

css @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.rotate { animation: rotate 3s linear infinite; }

Aquí el detalle clave es usar linear en lugar de ease-in-out. Con linear la velocidad de rotación se mantiene constante, justo lo que necesitas para que el giro se vea natural y no acelere ni frene.

Cómo crear un efecto bounce con translateY

El rebote es una animación más compleja porque combina varios fotogramas con desplazamientos verticales. Aquí trabajas con translateY en lugar de scale o rotate [10:20].

css @keyframes bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-30px); } 50% { transform: translateY(-15px); } 75% { transform: translateY(-5px); } }

.bounce { animation: bounce 2s infinite; }

Fíjate en algo interesante: puedes agrupar dos porcentajes en una sola declaración (0%, 100%) cuando comparten el mismo estado. El elemento sube 30 píxeles en el 25%, baja a 15 píxeles en el 50% y termina con un pequeño rebote de 5 píxeles en el 75%, simulando la pérdida de energía de un objeto que rebota.

Por qué los rebotes usan valores negativos

En CSS, el eje Y crece hacia abajo. Por eso, cuando quieres que algo suba, usas valores negativos en translateY. Un translateY(-30px) mueve el elemento 30 píxeles hacia arriba desde su posición original.

Cómo programar un spinner de carga con CSS

El spinner es esa rueda que ves girando cuando una página está cargando. Se construye con un borde casi completo gris y un solo lado en color de acento que rota [13:50].

css .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; margin: 20px; animation: spin 1s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

La magia está en el contraste entre border gris claro #f3f3f3 y border-top azul. Al rotar, parece que un solo segmento gira alrededor del círculo. El border-radius: 50% convierte el cuadrado en círculo perfecto.

¿Cómo se oculta un spinner cuando termina la carga? Con JavaScript detectas que el contenido ya está listo, ocultas el spinner cambiando su display a none y muestras el contenido principal.

Propiedades clave de la animación CSS

Cuando declaras animation, estás combinando varias propiedades en una sola línea. Estas son las que más vas a usar:

• animation-name: el nombre del keyframes que definiste.
• animation-duration: cuánto dura un ciclo completo, en segundos.
• animation-timing-function: la curva de velocidad (linear, ease-in-out, ease).
• animation-iteration-count: cuántas veces se repite, o infinite para siempre.

Un error común es escribir @keyframe en singular. La sintaxis correcta es @keyframes con S, porque defines varios fotogramas dentro de la regla.

¿Qué animación vas a probar primero en tu próximo proyecto? Cuéntame en los comentarios cuál te resultó más útil.