CSS3 Transition Failing

Question

I can't get transition to work on a website i'm working on. The nav menu hides and shows correctly, but it just appears instantly without tranistion. The CSS is this:

.nav ul li ul li {
    display:none;
    visibility:hidden;
    transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    display:block;
    visibility:visible;
}

and the HTML is

<div class="nav">
    <ul>
        <li>test</li>
        <li>test
            <ul class="sub-menu">
                <li>test</li>
            </ul>
        </li>
    </ul>
</div>

I have tested it in chrome, ffx, ie.

I actually got most of this code off another answer on this site, so i'm not sure what my problem is here.

I should have mentioned, I have tried opacity from other answers, but in a drop down menu, it won't work as the menu stays there.

score 2 · Answer 1 · answered Sep 14 '13 at 09:33

2

The transition from display: none to display: block does not behave like you expect.

Work with opacity instead.

jsFiddle Demo

answered Sep 14 '13 at 09:33

Itay

16,601
2
51
72

The problem with this, is for a drop down menu, the menu is actually there, meaning opacity can't be used in this case – Wayneio Sep 14 '13 at 09:41
@Wayneio What about something like this: http://jsfiddle.net/itay1989/e73px/1 or this http://jsfiddle.net/itay1989/e73px/2 – Itay Sep 14 '13 at 09:51

Saad Alothman · Answer 2 · 2013-09-14T14:40:24.517

0

display property does not work with transitions.

what itay suggested is valid,and you can play with other properties as well (position ?) to make the desired effect.

edited Sep 14 '13 at 14:40

answered Sep 14 '13 at 09:45

Saad Alothman

353
2
10

Couldn't understand what do you mean with the `nav`? He uses a class – Itay Sep 14 '13 at 09:46
1

huh, thats pretty weired as i looked again at his code, maybe the post was edited, i think the first part of my answer is irrelevant now, Gonna modify it .. thanks for the heads up Itay – Saad Alothman Sep 14 '13 at 14:39

score 0 · Accepted Answer · answered Sep 14 '13 at 09:48

0

Try This CSS this will work fine

.nav ul li > ul {
   opacity:0;
    overflow:hidden;
     transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    height:auto;
    opacity:1;  
}

Demo Here

answered Sep 14 '13 at 09:48

Love Trivedi

3,899
3
20
26

I added height:0; to the top bit, otherwise this worked well, thanks. – Wayneio Sep 14 '13 at 10:02

CSS3 Transition Failing

3 Answers3