Office avanzadoDiplomado de 120 horas. Martes y jueves, 6 a 9 p.m.
Transformación de contenedor
Un elemento se convierte en la pantalla de detalle. Toca la tarjeta.
Estilos Movimiento
Movimiento
El movimiento hace que la interfaz se entienda: muestra de dónde viene un elemento, a dónde va y qué cambió. Material 3 lo define con curvas de aceleración (easing), duraciones y patrones de transición.
Enfatizada
Lineal
Principios
1
Informativo
Muestra relaciones: el detalle sale de la tarjeta que lo contenía.
2
Enfocado
Lleva la atención a lo importante, sin distraer.
3
Expresivo
Le da personalidad a la marca, con medida.
Curvas de aceleración (easing)
Nada en el mundo real se mueve a velocidad constante. Una curva de aceleración describe cómo cambia la velocidad durante la animación. Toca cada curva para ver su efecto.
Duración
Las animaciones de una interfaz son cortas. Las transiciones pequeñas (un interruptor) duran entre 100 y 200 ms; las de pantalla completa, entre 400 y 600 ms. Elige una duración y observa.
Patrones de transición
Office avanzado123
Datos personales
Programa
Confirmar
Eje compartido
Pantallas con relación espacial (pasos, pestañas) se deslizan en el mismo eje.
Inicio
Cursos
Fundido a través
Pantallas sin relación: la saliente se desvanece y la nueva aparece con un leve aumento.
EditarCompartir
Fundido
Elementos que aparecen dentro de la pantalla: menús, diálogos, snackbars.
Demostración automática
Enfatizada
Aceleración
Lineal
En CSS
:root {
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
--md-sys-motion-duration-short4: 200ms;
--md-sys-motion-duration-medium2: 300ms;
--md-sys-motion-duration-long2: 500ms;
}
.hoja {
transform: translateY(100%);
transition: transform var(--md-sys-motion-duration-medium2)
var(--md-sys-motion-easing-emphasized-decelerate);
}
.hoja.abierta { transform: none; }
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}Accesibilidad
Reduce el movimiento
Respeta prefers-reduced-motion: algunas personas sienten mareo con animaciones grandes.
Nada que parpadee
Evita destellos de más de 3 veces por segundo (WCAG 2.3.1).
Se puede pausar
Lo que se mueve solo más de 5 s necesita pausa (WCAG 2.2.2).