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.