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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
18 Días
18 Hrs
45 Min
54 Seg
Movimiento impulsado por la acción
14/20Recursos
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:
“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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?