How to use different transition-delays?

http://stackoverflow.com/questions/5921073

by Marcel

HTML

<div id="wrap">
    <header>
        <div id="bar">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>&darr;</li>
            </ul>
        </div>
    </header>
    <section>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Sed molestie tellus risus, <a href="#">varius tempor libero</a>. Ut volutpat magna id lorem aliquet nec volutpat libero vestibulum. Praesent gravida nunc vestibulum mauris aliquam vulputate. Sed quis feugiat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec luctus faucibus urna, sed volutpat arcu luctus sit amet.</p>
    </section>
</div>

CSS

body { color:#222; background:#eeeeed; font:13px/1.4 'segoe ui', sans-serif; }
h1 { color:#999; margin:0 0 .5em; font:700 2em/1 'myriad pro', sans-serif; }
p { margin:0 0 1em; }
a { color:#06c; }
a:hover { text-decoration:none; }
#wrap { margin:1em; padding:2em 3em; background:#fff; position:relative; min-width:15em; max-width:60em; box-shadow:0 5px 10px #ccc;}

#bar { top:0; right:5em; padding:.5em; position:absolute;
    color:#fff; width:2em; height:2em; background:#333; overflow:hidden;
    transition:.4s ease-out 0, 1s; -webkit-transition:.4s ease-out 0, 1s; }
#bar:hover { height:10em; }
#bar ul { margin:0; font-weight:700; bottom:.75em; position:absolute; }
#bar ul li { width:1em; height:1em; margin:0; padding:.5em; text-align:center; }