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

CSS3 transition on a list is ignored

CSS3 transition on a list is ignored

Problem

I'm trying to fade in a list but for some reason the Transition appears to be ignored.

HTML

  • item 1
  • item 2

CSS

div {
    background-color: #ccc;
    width: 200px;
    height: 200px;
}
ul {
    display:none;
    /*transition*/
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
div:hover ul {
    display: inline-block;
}

Is there a problem with the way I'm trying to implement this?

http://jsfiddle.net/QeG4X/1/

Problem courtesy of: gpcola

Solution

You can not animate the display property of css. You can do it with opacity!

Here is an updated fiddle

http://jsfiddle.net/cfknoop/QeG4X/2/

 ul {
    opacity:0;
    /*transition*/
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}


div:hover ul {
    opacity:1;
}

Another option is to animate the height i.e. of an element.

Solution courtesy of: chris

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

CSS3 transition on a list is ignored

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×