-webkit-transition with display

Question

Is there a way to use -webkit-transition with display?

I'm using CSS display to hide and show a navigations second level … but only display: none and display: block on :hover is a little un-sexy… a ease would be great (like -webkit-transition: display 300ms ease-in;)

I know that's fairly easy to do this with jQuery, but I'm currently trying to setup everything with CSS3 (i know: not all browsers do support it, but that's irrelevant for this one project I'm currently working on)

here's some code & structure: (the li.menu1 has a :hover with section.nav-menu1 {display: block;})

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>

Answer 1

So I'm not sure I see all the pieces put together here. You want to animate opacity and visibility, with visibility having a delay so opacity is done before it triggers;

opacity: 0;
-moz-transition: opacity .25s linear, visibility .1s linear .5s;
-webkit-transition: opacity .25s linear, visibility .1s linear .5s;
-o-transition: opacity .25s linear, visibility .1s linear .5s;
transition: opacity .25s linear, visibility .1s linear .5s;
visibility: hidden;

to

opacity: 1;
visibility: visible;

visibility will wait .5s and then switch over to hidden. You can even turn off the visibility transition on one side if you want it to fade both ways. (So that when fading in, the element is instantly visible instead of waiting .5s and transitioning.)