Hazlas más cortas de lo que crees
- Una transición individual: 0.15~0.4 segundos
- Hazla más rápida hasta que sientas que es demasiado rápida, y luego bájale un poco
Haz que la acción combine con la curva
- El movimiento es tan subjetivo como el color, pero igual de importante
- Piensa en el movimiento del mundo real y compáralo
Aceleración y desaceleración
- Si una animación se siente poco natural, suele ser porque empieza o termina de golpe
- Aunque sea sutil, conviene agregar easing-in/out a la curva
cubic-bezier
- Para que se vea más real, la "inercia (Inertia)" también puede ayudar
Menos es mejor
- Cuantos más cambios tenga un elemento durante una animación, mayor es el riesgo de que se vea excesiva
- Si la opacidad va de 0 a 1, prueba con 0.4 en vez de 1. Si cambias el tamaño, prueba empezando desde un tamaño apenas más pequeño
- En la mayoría de los casos, una animación que encuentra su lugar debería moverse entre 5 y 40 píxeles
Evita los valores por defecto del navegador
- Los navegadores traen curvas integradas como linear, ease, ease-in, ease-out y ease-in-out
- Son cómodas y útiles en ciertas situaciones, pero son tan genéricas que todo termina viéndose igual (como cuando los sitios hechos con Bootstrap/Tailwind se parecen entre sí)
- Prueba los valores de autocompletado de curvas
cubic-bezier en VS Code
- O abre las herramientas de desarrollador del navegador y usa el editor de curvas
Varias propiedades, varios easing
- No siempre hace falta, pero cuando necesitas cambiar varias propiedades al mismo tiempo (como transform y opacity)
- A veces se ve bien aplicar la misma curva
cubic-bezier, pero en la práctica no siempre funciona
- Una curva que funciona bien para transform puede no encajar bien con un fade
- En esos casos, conviene elegir un easing distinto para cada propiedad CSS
- Puedes separar animaciones
@keyframes por propiedad, o usar varias transiciones
- Para
opacity, linear; para transform, cubic-bezier(.5, 0, .5, 1)
Usa retrasos escalonados
- Cuando haces transiciones de varios elementos, no subestimes el efecto de
animation-delay o transition-delay
In sale, Out entra
- Hay tres tipos de curvas de easing
- ease in (empieza lento)
- ease out (termina lento)
- in-out (rápido solo en medio, lento al principio y al final)
- Lo complicado de las transiciones es que a veces quieres que el in sea ease-out y el out sea ease-in
- Una animación donde una cosa sale y otra entra se ve como una sola transición para el usuario, pero internamente son dos transiciones
- Lo que sale quieres que vaya despacio, así que necesita ease-in; lo que entra debería ser ease-out
Apóyate en la aceleración por hardware
- No todas las propiedades CSS funcionan con fluidez en todos los dispositivos y navegadores
- Propiedades que siempre pueden acelerarse por hardware
- transform (todas las variantes de translate, scale, rotate e incluso las versiones 3D)
- opacity
- Propiedades que en algunos casos pueden acelerarse por hardware
- ciertas propiedades SVG
- filter (según el navegador y el filtro)
- Canvas y WebGL también tienen aceleración por hardware, pero aquí no se tratan
- En otras palabras, para mover, redimensionar o rotar, usa siempre la propiedad CSS
tranform
- Hagas lo que hagas, no cambies directamente el tamaño o la posición del elemento
- Si modificas directamente propiedades que afectan el layout de la página, como height, width, border, margin o padding, corres el riesgo de que la página se vuelva notablemente más lenta
Usa will-change cuando haga falta
- Si en teoría una animación debería verse fluida y rendir bien, pero se siente poco natural, usa la propiedad
will-change
- Como avisa de antemano qué va a cambiar, permite saltarse otros cálculos
Bonus: respeta las preferencias del usuario
- El usuario puede indicar en la configuración del dispositivo si prefiere "reduced motion"
- Puedes detectar ese valor con media queries o con JavaScript y responder en consecuencia
Aún no hay comentarios.