Suprimindo o início da transição CSS no carregamento da página

Em certas situações, as transições CSS podem ser ativadas inadvertidamente durante o carregamento da página, fazendo com que os elementos tremam. Esse problema pode surgir ao aplicar transições de cores em elementos.

Conforme o exemplo fornecido:

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

Após o carregamento da página, o texto dentro do elemento

muda de preto (a cor inicial) para verde. Esse comportamento é indesejado e pode ser visualmente perturbador.

Para evitar essa transição não intencional, uma solução envolve aproveitar um aspecto exclusivo do comportamento do Chrome. Quando uma página contém um elemento

<script> </script>

Esta solução alternativa simples resolve o bug no Chrome fornecendo um elemento