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
El problema del parpadeo sucede cuando un accionador no se encuentra en el lugar donde debería por la transformación. Por ejemplo, al realizar una animación pasa lo siguiente:
La animación entró en un ciclo que se observará como un parpadeo, porque las transiciones entre hover y no hover son rápidas.
/* Mal */
div {
width: 100px;
height: 100px;
background-color: purple;
}
div:hover {
transform: translateX(45px);
}
Para solucionar el problema de parpadeo, coloca el elemento que se transformará dentro de un contenedor. Después, utiliza el elemento contenedor como el accionador de la transformación del elemento. De esta manera, siempre se estará haciendo hover en el sitio adecuado sin importar que el elemento cambie.
/* Bien */
/* Elemento contenedor */
.container {
width: 100px;
height: 100px;
}
/* Elemento a transformar */
.item {
width: 100px;
height: 100px;
background-color: purple;
}
/* Trigger */
.container:hover .item {
transform: translateX(45px);
}
Contribución creada por Andrés Guano.
Aportes 9
Preguntas 1
El “parpadeo” se da porque cuando queremos hacer :hover en el item si este se mueve hay momentos donde no estamos haciendo :hover (ya que se va de donde esta nuestro puntero).
Al contener al item y hacer :hover en su container, por mas que el item se mueva, nunca dejamos de hacer :hover en el container ya que este no se mueve.
.
En algunas ocasiones hay un leve parpadeo cuando transformamos un elemento. En este caso lo vimos cuando al momento de hacer :hover sobre el elemento hijo, se llevaba acabo un translado en el eje Y.
.
Este leve parpadeo en algunas ocasiones no se nota, ya que son algunos factores externos los que provocan este error. Sin embargo, los pequeños detalles hacen la diferencia, no solo en las relaciones de pareja, sino en UX tambien.
.
Por lo tanto, para solucionar esto y que todos tus usuarios tenga la mejor experiencia posible, hay que agregarle el :hover al elemento padre para que el hijo sea el que haga la accion. Esto se hace de la siguiente manera:
.parent_element:hover child_element{
Your: transformations;
}
El “parpadeo” se da porque cuando queremos hacer :hover en el item si este se mueve hay momentos donde no estamos haciendo :hover (ya que se va de donde esta nuestro puntero).
Al contener al item y hacer :hover en su container, por mas que el item se mueva, nunca dejamos de hacer :hover en el container ya que este no se mueve.
No sabia que la etiqueta de <style> funcionaba fuera de la etiqueta <head></head> ?
Para que se note mejor el parpadeo hay que hacer el translateY de 200px.
Faltó cambiar el selector div inicial por .container
Con frecuencia sucede que cuando hacemos hover en algunos de los elementos vemos como un leve parpadeo que hace que tengamos una mala experiencia como usuarios. La forma de solucionar esto es mediante un contenedor. El disparador de nuesto efecto va a ser el hover del contenedor, pero el elemento que va a reaccionar es otro.
si alguien se pregunta porque cambia de color, es porque no le dio un color distinto al “container” y al “item” le dio palevioletred al “item” cuando se le está haciendo hover al container, y le dio otro colo distinto al mismo item, cuando no se le está haciendo hover a su container.
nice!
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.