01 Capítulo 1 · Lección 13

Transiciones Combinadas Avanzadas

Redactado por

Sebastian V.

Fecha de publicación

12/04/2024

Tiempo de lectura

5 min

Tema

CSS Transitions

Orquestando el caos

Hasta ahora hemos sido simples: transition: all 0.3s ease. Pero en las interfaces de más alto nivel (como Apple, Stripe, o Vercel), rara vez verás que todo cambie al mismo tiempo y a la misma velocidad. La clave del "Motion Design" premium está en la combinación y sincronización de múltiples transiciones con valores distintos.

Desacoplando propiedades

Un elemento puede desvanecerse (opacity) en 0.2s, pero escalar (transform) en 0.6s con rebote. El usuario no percibe la matemática, pero su cerebro percibe algo que se siente suave y físico.

> _

transition: opacity 0.2s linear, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

Movimientos opuestos

Otra técnica fascinante es hacer que el contenedor principal se mueva hacia arriba, pero un elemento hijo (como un ícono) se mueva hacia abajo. Esto genera una sensación de inercia o peso, ideal para botones de descarga o envío.

Consejo profesional

Al combinar múltiples valores largos separados por comas, tu CSS puede volverse ilegible. Aprovecha las variables CSS (Custom Properties) para almacenar tus curvas de Bezier favoritas.

Ejemplo práctico (Efecto Inercia)

> _

<button class="download-btn">
  <span class="icon">⬇</span>
  Descargar
</button>

.download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #a855f7;
  color: #0f172a;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  font-family: 'afronaut', serif;
  
  /* Transicionamos el color de fondo y una ligera elevación */
  transition: transform 0.2s ease, background 0.2s ease;
}

.icon {
  display: inline-block;
  /* El icono responderá con una curva de rebote distinta al botón */
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.download-btn:hover {
  background: #06b6d4;
  transform: translateY(-2px);
}

/* Solo animamos el icono cuando el contenedor tiene hover */
.download-btn:hover .icon {
  transform: translateY(4px);
}

> _

Haz hover. El botón sube ligeramente de forma rápida. Sin embargo, la flecha de descarga baja bruscamente y rebota con una curva elástica.

Errores comunes

Exagerar con las combinaciones Si un botón se mueve, cambia de color, escala, brilla y da vueltas a la vez, se sentirá caricaturesco, no premium. Mantén las coreografías sutiles.

Descoordinación temporal Asegúrate de que la suma de delays y duraciones de los elementos combinados no exceda un límite razonable (como 0.5s) para que se sienta como una sola acción fluida.

Practica lo aprendido

Genera inercia y movimiento secundario en tus elementos de acción.

01 Asigna duraciones distintas a diferentes propiedades separándolas por comas.

02 Para que se sienta orgánico, no todas las partes de tu UI deben durar lo mismo.

03 Aplica una transición rápida al background y lenta al icono.

04 Combina transform: translateY para crear un efecto de gravedad en la flecha.

05 Lograrás que el componente parezca vivo y compuesto de varias piezas.