javascript - jquery - How do I slide down <li>'s starting from the last and so on -

hope well, trying animated 6 list items , down.

when goes down want start last first , when comes want whole list go up.

my list item this:

<ul>    <li>menu item 1</li>    <li>menu item 2</li>    <li>menu item 3</li>    <li>menu item 4</li>    <li>menu item 5</li>    <li>menu item 6</li> </ul> 

i didn't add jquery here because cant figure out start, know how make slide , down cant make slide down starting last first..

if can point me in right direction, appreciate it.

thanks.

something this?

http://jsfiddle.net/ej5x29q7/4/

html

<label for="click-me">click me</label><input type="checkbox" id="click-me">  <ul>     <li>menu item 1</li>     <li>menu item 2</li>     <li>menu item 3</li>     <li>menu item 4</li>     <li>menu item 5</li>     <li>menu item 6</li> </ul> 

javascript

ul {     margin: 3em 0; }  ul li {     transition-duration: 800ms; }  li:nth-child(1) { transform: translatey(-100%); } li:nth-child(2) { transform: translatey(-200%); } li:nth-child(3) { transform: translatey(-300%); } li:nth-child(4) { transform: translatey(-400%); } li:nth-child(5) { transform: translatey(-500%); } li:nth-child(6) { transform: translatey(-600%); }   input[type=checkbox]:checked + ul li:nth-child(1) { transition-delay:2000ms; } input[type=checkbox]:checked + ul li:nth-child(2) { transition-delay:1600ms; } input[type=checkbox]:checked + ul li:nth-child(3) { transition-delay:1200ms; } input[type=checkbox]:checked + ul li:nth-child(4) { transition-delay: 800ms; } input[type=checkbox]:checked + ul li:nth-child(5) { transition-delay: 400ms; } input[type=checkbox]:checked + ul li:nth-child(6) { transition-delay:   0ms; }   input[type=checkbox]:checked + ul li { transform: none }