Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Transitions on list item background

CSS Transitions on list item background

Problem

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

Problem courtesy of: JCHASE11

Solution

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;
}
Solution courtesy of: Quantastical

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Transitions on list item background

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×