No tienes acceso a esta clase

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

Problemas de parpadeo

16/20
Recursos

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:

  • Al mover el cursor sobre un elemento se traslada hacia la izquierda.
  • Al trasladarse, deja de estar el cursor sobre el elemento, por lo que vuelve a su posici贸n inicial.
  • Al estar en su posici贸n inicial, el cursor est谩 sobre el elemento, entonces accionar谩 nuevamente la transformaci贸n.

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);
}

驴C贸mo solucionar este problema?

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

Ordenar por:

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

o inicia sesi贸n.

El 鈥減arpadeo鈥 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.

Conclusiones de la clase

.
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;
}

馃嵖Problemas de parpadeo

鉂orque ocurre el parpadeo?

El 鈥減arpadeo鈥 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.

![](

nice!

Estoy de acuerdo con lo planteado por Martin Fernandez, y para demostrar ello, si en vez de usar :hover, usamos :active, lo cual ejecuta la animaci贸n al hacer click sobre el elemento, se elimina el parpadeo sin agregar un contenedor padre, porque el evento click no se ejecuta a la misma velocidad que el evento :hover, es decir antes de otro evento click, primero debemos soltar el bot贸n y ello evita la saturaci贸n de eventos click.

Comparto un recurso muy bueno en ingl茅s que contiene ejemplos para que puedan visualizar mejor

https://www.joshwcomeau.com/animation/css-transitions/#ux-touches-10

Arregl茅 un elemento de mi portafolio con este problema. Gracias.

Ac谩 dejo el c贸digo de un ejemplo de las cards que suben cuando se hace hover sobre ellas, y solucionando el problema del 鈥減arpadeo鈥

https://acortar.link/DzNSs9

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 鈥渃ontainer鈥 y al 鈥渋tem鈥 le dio palevioletred al 鈥渋tem鈥 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.