01 Capítulo 1 · Lección 3

transition duration

Redactado por

Sebastian V.

Fecha de publicación

23/03/2024

Tiempo de lectura

4 min

Tema

CSS Transitions

El ritmo de la interfaz

Si transition-property le dice al navegador qué cambiar, transition-duration le dice cuánto tiempo tiene para hacerlo. Es el cronómetro que define si una acción se siente ágil y responsiva, o pesada y aburrida.

Segundos vs Milisegundos

Puedes definir la duración de dos maneras:

✦ Segundos (s): Ejemplos: 0.3s, 1.5s. Es el formato más legible para duraciones cortas.
✦ Milisegundos (ms): Ejemplos: 300ms, 1500ms. A muchos desarrolladores les gusta porque elimina el punto decimal. (0.3s es exactamente igual a 300ms).

Psicología del tiempo en UX

En diseño de interfaces, el tiempo es relativo. Lo que parece un instante para el ojo humano puede sentirse como una eternidad en una aplicación web.

Regla de oro: Las microinteracciones (hover de botones, links, checkboxes) deben durar entre 0.15s y 0.25s. Las animaciones más grandes (abrir un modal, desplegar un menú) deben durar entre 0.3s y 0.5s.

Consejo profesional

Las transiciones de salida (cuando el usuario quita el hover) pueden ser ligeramente más rápidas que las de entrada. Al usuario ya no le interesa ese elemento, así que ciérralo ágilmente.

Ejemplo práctico

> _

<div class="track">
  <div class="car fast">0.2s</div>
  <div class="car medium">0.8s</div>
  <div class="car slow">2.5s</div>
</div>

.track:hover .car {
  transform: translateX(300px);
}

.car {
  width: 60px;
  height: 40px;
  border-radius: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  font-weight: bold;
  font-family: 'afronaut', serif;
  font-size: 12px;
  transition-property: transform;
}

.fast { background: #9FA6FF; transition-duration: 0.2s; }
.medium { background: #56C288; transition-duration: 0.8s; }
.slow { background: #57B0FB; transition-duration: 2.5s; }

> _

0.2s

0.8s

2.5s

Pasa el cursor sobre la pista

Pasa el cursor sobre la pista. Observa cómo la duración cambia completamente la 'personalidad' de cada cuadrado.

Errores comunes

Duraciones mayores a 1 segundo Hacer que un usuario espere 1 segundo o más para que un botón termine de reaccionar arruina la percepción de rendimiento de la página.

Valor sin unidad Si escribes transition-duration: 3; sin la "s" o "ms", el navegador lo ignorará por completo.

Practica lo aprendido

Encuentra el punto dulce de la velocidad para diferentes elementos UI.

01 Experimenta con valores en milisegundos (ms) y segundos (s).

02 Crea un botón con transition-duration: 0.15s.

03 Nota cómo 0.15s se siente instantáneo pero no brusco (ideal para botones).

04 Aplica 0.4s a un menú desplegable (ideal para paneles grandes).

05 Evita duraciones de más de 1 segundo en interfaces reales.