Por lo que entiendo, se trata de darle un toque más natural a la animación 🤔, es decir, en lugar de que sea una animación completamente linear podemos jugar con ellas para que tenga diferentes velocidades tanto de subida como de bajada, incluso podemos lograr que un objeto se comporte de forma más natural, por ejemplo, el efecto de un rebote 😄
Importancia de las animaciones web
5 razones para usar animaciones en la web
Conceptos iniciales
Propiedades para crear animaciones con CSS y propiedades animables
Pseudo-clases y pseudo-elementos en las animaciones
Timing functions, planos y ejes
Transformaciones en 2D y 3D
Transform translate
Transform rotate, scale, skew y matrix
Transform origin
Transform style y perspective
Backface visibility
Parallax con transformaciones
Efecto parallax: estructura HTML
Efecto parallax: estilos CSS
Transiciones
Transition property y duration
Transition timing function y delay
Tips de UX
Movimiento impulsado por la acción
Tiempos de espera
Problemas de parpadeo
Rendimiento y accesibilidad
Propiedades recomendadas y no recomendadas para animar
Aceleración de hardware y la propiedad will-change
Preferencias de movimiento reducido
Libros recomendados y próximos pasos
Continúa en el Curso de Animaciones con CSS
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
UX tips are recommendations to make your animations better for the user experience. We will study three, which are:
- Action-driven motion.
- Waiting times.
- Flicker issues.
Action-driven motion
When creating a transition, the time from point A to point B is the same. Action-driven motion consists of modifying the transition times, so that the return time (from B to A) is longer, so that the animation rests and there is no abrupt movement.
This is achieved by adding the transition in the animation actuator and in the element, but with different times. Note that the animation first happens with the event.
/* From A to B */selector:hover { transition: transform 1s; }/* From B to A */selector { transition: transform 1.5s; }Contribution created by Andrés Guano.
Contributions 11
Questions 1
Sort by:
“Nunca es demasiado tarde para ser la persona que podrías haber sido”
George Eliot"
Es un pequeño detalle, sin embargo de calidad en los pequeños detalles están hechos los GRANDES PROYECTOS!! 😄
🍿Movimiento impulsado por la acción
❤Que es?
La pseudo-clase :hover de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).
🧡Lecturas Recomendadas
El círculo debe tener un fondo, una base para que al hacer :hover no tome al elemento, sino que tome ha esta base para que pueda realizar su movimiento sin problema.
🦄Movimiento impulsado por acción
Se trata de darle un movimiento “natural” a nuestros elementos animados. ¿Cómo lo conseguimos? Debemos evitar darle un timing function lineal y probar con otros tipos de movimiento.
.
Un ejemplo puede ser que un objeto tarde más en regresar a su estado inicial que en cambiar de estado al principio.
Si me equivoco, cualquier feedback es bienvenido :3
Siempre algo nuevo que aprender, con esto puedo hacer que mi portafolio se vea mas interesante.
This is very interesting
INo sabia de esto y creo que seria un plus para el diseño
Esta es la base de tipo de animaciones que buscaba realizar desde hace tiempo. Me encanta ❤️
Genial!
TIps UX : "movimiento impulsado por la accion"
Es el movimiento de ida y vuelta desde un punto a otro en diferentes o no velocidades.
Want to see more contributions, questions and answers from the community?