Je rencontre un problème avec le CSS transition qui est déclenchée au chargement de la page.
Le problème est que lorsque j'applique un color transition à un élément, (ex : transition: color .2s ) puis, lors du premier chargement de la page, mes éléments passent du noir à leur propre couleur.
Supposons que j'ai le code suivant :
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>Au chargement de la page, mon p.green s'effacera de black a green .
Je ne veux pas appliquer la transition de couleur à l'image. :hover pseudo classe car cela ne permettrait pas d'appliquer la transition onMouseLeave .
C'est vraiment ennuyeux d'avoir le texte qui clignote sur la page web. Jusqu'à présent, j'ai évité d'utiliser les transitions, sauf si j'en ai vraiment besoin, et même dans ce cas, je les utilise avec précaution. Ce serait génial s'il y avait une solution vraiment évidente à ce problème que je ne vois pas !
Cela se produit sur Google Chrome. Je n'ai pas testé dans d'autres navigateurs.
jsfiddle.net/ShyZp/2 (merci @Shmiddty)
