Las microinteracciones, como un efecto hover, un menú que se abre o un aviso que se desliza, funcionan cuando se sienten rápidas y con propósito. Casi toda la calidad viene de dos decisiones: la duración y el suavizado.
Duraciones que se sienten bien
- Cambios de estado pequeños (hover, foco, interruptores): 100 a 200 ms.
- Menús, tooltips y desplegables: 150 a 250 ms.
- Modales y paneles laterales: 200 a 350 ms.
- Cambios grandes de diseño o de página: 300 a 500 ms.
Cualquier cosa de más de medio segundo empieza a sentirse lenta con el uso repetido. Las salidas suelen ser algo más rápidas que las entradas.
Combina la curva con la dirección
Los elementos que entran en pantalla suelen usar ease-out, para desacelerar al llegar. Los que salen usan ease-in. Un ease-in-out simétrico es lo mejor para lo que viaja de un lugar a otro dentro de la vista.
Usa una curva propia para dar personalidad
Las palabras clave incluidas están bien, pero un cubic-bezier propio da a un producto una sensación reconocible. Previsualiza la curva en el editor, compárala con linear y aplica la misma curva en toda la interfaz para mantener la coherencia.
Anima propiedades baratas
Transform y opacity son las propiedades más baratas de animar para el navegador. Evita animar width, height o top, que obligan a recalcular el diseño.
Respeta el movimiento reducido
A algunas personas el movimiento les marea o las distrae. Usa la media query prefers-reduced-motion para acortar o quitar las animaciones no esenciales.
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
Prueba en dispositivos reales
Las animaciones que van fluidas en un portátil rápido pueden entrecortarse en un teléfono de gama media. Prueba en equipos más modestos.
Preguntas frecuentes
¿Debe animarse todo elemento? No. Anima para dar retroalimentación o explicar un cambio, no como decoración.
¿Una duración más larga siempre es más suave? No. Solo se siente más lenta.