01 Capítulo 1 · Lección 5

transition delay

Redactado por

Author

Fecha de publicación

27/03/2024

Tiempo de lectura

4 min

Tema

CSS Transitions

Esperando el momento adecuado

transition-delay te permite poner "en pausa" la transición antes de que comience. Define cuánto tiempo debe esperar el navegador desde que ocurre el cambio de estado (como hacer hover) hasta que empieza a animarse.

¿Para qué queremos que la UI espere?

Podría parecer contraproducente hacer que el usuario espere. Sin embargo, el delay es una de las herramientas más potentes para crear Coreografía en UI y resolver problemas reales de usabilidad.

✦ Menús tolerantes: Cuando el usuario mueve el mouse accidentalmente fuera de un dropdown por un milisegundo, no queremos que se cierre de golpe. Un pequeño delay al salir evita la frustración.
✦ Secuencias: Puedes animar 3 elementos distintos aplicando un delay de 0.1s, 0.2s y 0.3s. Aparecerán en cascada de manera hermosa.
✦ Prevenir parpadeos: A veces, si el hover ocurre muy rápido al pasar el cursor de largo, se dispara una transición a medias. Un delay de 0.05s exige que el cursor se detenga intencionalmente sobre el elemento.

Consejo profesional

Los delays negativos (ej. -0.2s) son un truco avanzado: hacen que la transición comience instantáneamente pero saltándose los primeros 0.2 segundos de la animación.

Ejemplo práctico (Menú tolerante)

> _

<div class="menu">
  Pasa el cursor
  <div class="dropdown">
    <div class="item">Opción 1</div>
    <div class="item">Opción 2</div>
    <div class="item">Opción 3</div>
  </div>
</div>

.menu {
  position: relative;
  padding: 12px 24px;
  background: rgba(255,255,255,0.1);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 0;
  color: white;
  cursor: pointer;
  font-weight: 300;
  font-family: 'afronaut', serif;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 0;
  padding: 8px;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: all 0.3s ease;
  transition-delay: 0.5s; 
}

.item {
  padding: 8px 16px;
  background: transparent;
  border-radius: 0;
  color: white;
  font-family: 'afronaut', serif;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.2s ease;
}

.item:hover {
  background: rgba(255,255,255,0.1);
}

.menu:hover .dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s; 
}

> _

Pasa el cursor. El menú se abre al instante (delay 0s). Al quitar el cursor, espera medio segundo antes de cerrarse (delay 0.5s). ¡Esto perdona errores de puntería del usuario!

Errores comunes

01

Delays iniciales demasiado largos Si un botón tarda medio segundo en reaccionar cuando le haces hover, el usuario pensará que la página web está colgada.

Practica lo aprendido

Comprende cómo el tiempo de espera puede mejorar la tolerancia a errores de la UI.

01 Aprende que el delay puede usarse para crear secuencias.

02 Aplica delay distinto al entrar que al salir de un :hover.

03 Usa delay para dar a los usuarios "margen de error" al mover el mouse en menús.

04 Si pones delays muy largos (más de 0.5s), la UI parecerá rota o lenta.

05 Puedes aplicar delays negativos (-0.2s) para saltarte el inicio de la transición.