Estoy experimentando un problema con la transition
propiedad CSS que se activa al cargar la página.
El problema es que cuando aplico a color
transition
a un elemento, (por ejemplo transition: color .2s
:), cuando la página carga por primera vez, mis elementos parpadean de negro a su propio color asignado.
Suponiendo que tenga el siguiente código:
CSS
p.green {
color: green;
transition: color .2s;
-moz-transition: color .2s;
-webkit-transition: color .2s;
-o-transition: color .2s;
}
p.green:hover {
color: yellow;
}
HTML
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<p class="green">The Flashing Text</p>
</body>
</html>
Al cargar la página, mi p.green
se desvanecerá de black
a green
.
No quiero aplicar la transición de color a la pseudoclase:hover
ya que eso no aplicaría la transición onMouseLeave .
Es realmente molesto que el texto aparezca en la página web. Hasta este momento he estado evitando usar transiciones a menos que realmente las necesite y aun así las uso con cuidado. ¡Sería genial si hubiera alguna solución realmente obvia para esto que no estoy viendo!
Esto sucede en Google Chrome. No lo he probado en otros navegadores.
jsfiddle.net/ShyZp/2 (gracias @Shmiddty)
window.onload = function(){document.body.className += " loaded";}
body.loaded p.green{transition:color .2s;}