2

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?

Zaki Aziz
  • 3,592
  • 11
  • 43
  • 61

2 Answers2

3

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).

Community
  • 1
  • 1
Logan Serman
  • 29,447
  • 27
  • 102
  • 141
  • I see the CSS transition code but how does the browser know which color the background will be first and which color it will transition into? – Zaki Aziz Jan 18 '12 at 21:12
  • After doing some research I've realized this can only be used in a pseudo class like :hover and :focus, I'm trying to have the background automatically animate when the page loads. – Zaki Aziz Jan 19 '12 at 08:05
0

You can use jQuery animate to transtion background color of li. somthing like below should do the trick,

DEMO here

$(document).ready(function () {
    $('.unread').animate({ backgroundColor: "#68BFEF" }, 2000);
});

You can read about it here

Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134