Question

I use CSS transitions fairly regularly and for some reason I cannot get them to work on a simple unordered list. I created a demo here: http://jsfiddle.net/79NhC/

On the list item, I have the following css:

#servicesBox li {
    border-bottom:1px solid #eeeeee; 
    padding:10px 0 10px 10px;  
    webkit-transition: background 0.2s; 
    moz-transition: background 0.2s; 
    ms-transition: background 0.2s; 
    o-transition: background 0.2s; 
    transition: background 0.2s; 
}​

For some reason, when a user hovers over the list item, the background does not gracefully fade in. Any reason why? Thanks in advance

Answer 1

You need to put a - before all of your browser-specific transition declarations.

So, like this:

#servicesBox li
{
    border-bottom:1px solid #eeeeee;
    padding:10px 0 10px 10px;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;
    transition: background 0.2s;
}