Solución de Parpadeo en Hover con CSS y HTML

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

• Ejemplo de parpadeo.

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

• Ejemplo para solucionar el problema del parpadeo.

Contribución creada por Andrés Guano.