Maurici Abad Gutierrez
Hi! I'm a Software Engineering student who loves JavaScript, User Experience design and Pasta.
Animaciones en CSS:
Buenas prácticas y trucos
por Maurici Abad
¿PARA QUÉ SIRVEN?
FEEDBACK
ENSEÑAR
LLAMAR LA ATENCIÓN
HACER LAS ESPERAS
PARECER MAS CORTAS
PERSONALIDAD
AGRADABLE
DURACIÓN Y EASINGS
No hacer esperar
Easing
linear
ease-out
ease-in-out
Tipos de easings
ease-in
Easing
@keyframes
@keyframes mymove {
0% {transform: translate(0px, 0px); background: red;}
25% {transform: translate(0px, 100px); background: blue;}
50% {transform: translate(100px, 100px); background: yellow;}
75% {transform: translate(100px, 0px); background: green;}
100% {transform: translate(0px, 0px); background: red;}
}
TRUCOS
FLUIDEZ
- JavaScript: Iniciar cambios visuales
- Style: Calcular que reglas de CSS aplicar
- Layout: Calcular espacio necesario
- Paint: Rellenar los píxeles por capas
- Compositing: Unir las capas
FLUIDEZ
FLUIDEZ
No animar
elementos grandes
FLUIDEZ
Trucos en general
- No usar easings por defecto, crea uno especifico
- Solo animar transform y opacity
- Usar ::before & ::after
- Duraciones cortas normalmente (<200ms)
EJEMPLO
Animación 1: Rellenar punto
Animación 2: Puntos incorrecto
Animación 3: Puntos ok
Animación Extra: Tooltip
GRACIAS
PREGUNTAS
Fuentes
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
https://material.io/design/motion/speed.html
https://uxdesign.cc/micro-interactions-a-superpower-of-successful-design-ef7706154934
https://medium.com/@vasia1048/8-key-ux-principles-for-creating-great-web-applications-56451fe831b7
Animaciones en CSS: Buenas prácticas y trucos
By Maurici Abad Gutierrez
Animaciones en CSS: Buenas prácticas y trucos
Aprende a crear animaciones en css útiles, fáciles de programar y eficientes.
