You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
5 Hrs
36 Min
55 Seg

Movimiento impulsado por la acción

14/20
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:

Want to see more contributions, questions and answers from the community?

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 😄

“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

Documentación :hover

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.