21 · Calma que informa
Movimiento
En una herramienta médica el movimiento tiene un solo trabajo: decir qué cambió. Breve, suave y fácil de apagar.
Prueba de transiciones
Ajusta la duración y activa «reducir movimiento» para ver cómo se comporta la misma transición.
Aviso que entra
Cita guardada
Panel que se despliega
Detalle de la cita
Cambio de hora
9:00
Curva y duraciones
cubic-bezier(.2, 0, 0, 1): arranca ágil y se asienta sin rebotes.- Micro (foco, hover)
- 100 a 150 ms
- Aviso, despliegue
- 200 ms
- Panel o diálogo
- 240 ms
- Máximo
- 300 ms. Nada anima más
- Salida
- Un 20 % más corta que la entrada
- Curva
- Siempre la misma; sin rebotes ni elásticos
Reducir movimiento
- Se respeta
prefers-reduced-motion: reducedel sistema, y un ajuste propio en la app.- Qué se quita
- Desplazamientos, escalas y paralaje. Quedan fundidos de 100 ms o cambios instantáneos.
- Qué no se anima nunca
- Parpadeos de más de 3 por segundo, rebotes, relojes de cuenta regresiva, confeti.
- Carga
- Una sola barra o indicador estático con texto: «Guardando…».
- Autoplay
- Ningún video ni animación empieza solo. Si existe, se puede pausar.
Sí
- Animar un cambio para que no pase inadvertido
- Mantener el foco donde estaba tras una transición
- Probar con «reducir movimiento» activado
No
- Animar por decoración al abrir cada pantalla
- Mover el contenido bajo el dedo mientras alguien intenta tocarlo
- Celebrar con confeti o sonidos un guardado