Suprimir el inicio de la transición CSS al cargar la página
En determinadas situaciones, las transiciones CSS pueden activarse sin darse cuenta durante la carga de la página, lo que provoca que los elementos parpadeen. Este problema puede surgir al aplicar transiciones de color en elementos.
Según el ejemplo proporcionado:
CSS:
p.green {
color: green;
transition: color .2s;
}
p.green:hover {
color: yellow;
}HTML:
<p class="green">The Flashing Text</p>
Al cargar la página, el texto dentro del elemento
pasa de negro (el color inicial) a verde. Este comportamiento no es deseado y puede resultar visualmente perjudicial.
Para evitar esta transición no deseada, una solución implica aprovechar un aspecto único del comportamiento de Chrome. Cuando una página contiene un elemento