No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
6H
28M
2S

Movimiento impulsado por la acci贸n

14/20
Recursos

Los tips de UX son recomendaciones para que tus animaciones sean mejores para la experiencia de usuario. Estudiaremos tres, los cuales son:

  • Movimiento impulsado por la acci贸n.
  • Tiempos de espera.
  • Problemas de parpadeo.

Movimiento impulsado por la acci贸n

Al momento de crear una transici贸n, el tiempo del punto A al punto B es el mismo. El movimiento impulsado por la acci贸n consiste en modificar los tiempos de la transici贸n, para que el tiempo de regreso (de B a A) sea mayor, para que la animaci贸n repose y no exista un movimiento abrupto.

Esto se consigue a帽adiendo la transici贸n en el accionador de la animaci贸n y en el elemento, pero con diferentes tiempos. Ten en cuenta que la animaci贸n primero sucede con el evento.

/* De A a B */
selector:hover {
    transition: transform 1s;
}

/* De B a A */
selector {
    transition: transform 1.5s;
}

Contribuci贸n creada por Andr茅s Guano.

Aportes 11

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 馃槃

鈥淣unca es demasiado tarde para ser la persona que podr铆as haber sido鈥
George Eliot"

Yo realize un boton que simula el cambio del tema de Dia a Dark Mode, aunle falta agregarle los iconos respectivos pero alli va, les dejo el CodePen CODIGO

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

鉂ue 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 鈥渘atural鈥 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 鉂わ笍

TIps UX : "movimiento impulsado por la accion"
Es el movimiento de ida y vuelta desde un punto a otro en diferentes o no velocidades.