Stop CSS transition from firing on page load
@Shmiddty comments on this question left me thinking, so I have been playing around with the code and found a solution.
The problem lies on the header declarations. By inverting the order of the CSS and JS external file calls - i.e. putting the CSS before the JS - the color transitions stop firing on page load:
<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>
My guess is that the JS load was delaying the load of the CSS to after the DOM was ready. By that time (as @Shmiddty suggested) the text had already been assigned the default browser color and was then using my CSS transition declaration to fade into its styled color.
** I'm still not sure this is the most appropriate way to do it, but it works. If anyone has a better solution please feel free to add or edit.
There is a bug in Chrome that causes CSS transitions to fire if the page includes a <form> element.
One simple fix is to add a script tag containing a single space to the footer of the page.
<script> </script>
You can follow the bug at https://crbug.com/332189 and https://crbug.com/167083.