Question

I am loading a few elements in a page like this:

<ul>
    <li> Some stuff</li>
    <li> Some other stuff</li>
    <li class="unread"> Some more stuff</li>
</ul>

On page load I want the background of the list item with the class .unread to transition from a certain color to the color of the background of the actual page (think of an unread notification on facebook)

Is some sort of javascript absolutely necessary or can this be done with just pure CSS?

Answer 1

You can do this using CSS3 transitions. See the answer to this question to see what I mean. The only issue is older browsers not supporting CSS3 and you have to include custom CSS for each rendering engine (similar to rounded borders).