У меня проблема с тем, что CSS-свойство transition срабатывает при загрузке страницы.
Проблема заключается в том, что когда я применяю color transition к элементу (например: transition: color.2s), то при первой загрузке страницы мои элементы мигает с черного на свой собственный назначенный цвет.
Предположим, у меня есть следующий код:
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>
При загрузке страницы мой p.green исчезнет с black на green.
Я не хочу применять цветовой переход к псевдоклассу :hover как это не применимо к переходу onMouseLeave.
Я действительно раздражаю, когда текст вспыхивает на веб-странице. До этого момента я избегал использования переходов, если они мне действительно не нужны, и даже при этом я использую их с осторожностью. Было бы здорово, если бы было какое-то действительно очевидное решение, которого я не вижу!
Это происходит в Google Chrome. Я не тестировал в других браузерах.
jsfiddle.net/ShyZp/2 (спасибо @Shmiddty)
