我遇到一个问题的CSS转换属性beeing在页面加载。
问题是，当我应用颜色转换到元素(例如：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将从黑色渐变为绿色。
我不想应用颜色转换到：hover伪类，因为不会应用转换onMouseLeave。
我真的很烦人的文字在网页上闪烁。到目前为止，我一直在避免使用转换，除非我真的需要它们，即使如此，我谨慎使用。这将是巨大的，如果有一些真正明显的解决方案，我没有看到！
编辑1：
这发生在Google Chrome上。尚未在其他浏览器中测试…
编辑2：
经过一些测试后，我意识到，我不需要一个父元素与指定的颜色触发闪烁的元素与颜色过渡属性，所以我重申了我的问题
jsfiddle.net/ShyZp/2(感谢@Shmiddty)
解决方法
@Shmiddty对这个问题的评论让我想起来，所以我一直在玩代码，并找到了一个解决方案。
问题在于头声明。通过反转.CSS和.JS外部文件调用的顺序 – 即首先是.CSS，然后是.JS – 颜色转换在页面加载时停止触发：
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
我的猜想是.JS负载将.CSS的负载延迟到DOM准备好之后。到那时(如@Shmiddty建议)，文本已经被分配了默认的浏览器颜色，然后使用我的.CSS转换声明来淡入它的样式化的颜色。
