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 16
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> ?
Faltó cambiar el selector div inicial por .container
Para que se note mejor el parpadeo hay que hacer el translateY de 200px.
Tambien es importante tener encuenta que si vas a mover el item fuera del tamaño del contenedor lo que debes hace es tambien agrandar el contenedor, para que no tengas ese problema(AUNQUE ESTO depende mucho de lo que estes haciendo)
Les comparto un ejemplo de lo que hablo.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main>
<div class="container">
<div class="item"></div>
</div>
</main>
</body>
</html>
CSS
/*
1. Posicionamiento
2. Modelo de caja
3. Tipografia
4. Visuales
5. Otros
*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
html{
font-size: 62.2%;
font-family: "Roboto", sans-serif;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-size: 1.5rem;
}
div{
width: 100px;
height: 100px;
border-radius: 50%;
}
.container:hover{
width: 300px;
}
.container:hover .item{
background: palevioletred;
transform: translate(200px);
transition: 2s;
}
.item {
background: palegoldenrod;
transition: transform 2s;
}
Lo que entendí es que debemos anidar el hijo dentro de un padre y al hacer el hover sobre el padre este mismo se va a mover pero no el elemento en sí, así evitando los molestos parpadeos.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?