fitri1986

/* CSS3 TRANSITION ONLY EFFECT */
#panel {
width:300px;
list-style:none;
padding-top:30px;
display:inline-block;
}

#panel li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
}

#panel li a {
color:#fff;
display:block;
padding:10px;
}

#panel li a:hover {
color:#00c6ff;
}

#panel li.animation {
-moz-transition: all 0.4s ease-in-out;
-moz-transform:translateX(0px);
-o-transition: all 0.4s ease-in-out;
-o-transform:translateX(0px);
-webkit-transition: all 0.4s ease-in-out;
-webkit-transform:translateX(0px);
}

#panel li.animation:hover {
-moz-transform:translateX(25px);
-o-transform:translateX(25px);
-webkit-transform:translateX(25px);
}

<div id="panel">
<ul>
<li><h3>MENU</h3></li>
<li class="animation"><a href="#">Link 1</a></li>
<li class="animation"><a href="#">Link 2</a></li>
<li class="animation"><a href="#">Link 3</a></li>
<li class="animation"><a href="#">Link 4</a></li>
<li class="animation"><a href="#">Link 5</a></li>
</ul>
</div>

/* CSS3 TRANSITION ONLY EFFECT */
#paneltwo {
width:300px;
list-style:none;
position:relative;
display:inline;
}

#paneltwo li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
float:left;
overflow:hidden;
position:relative;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
z-index:10;
overflow:hidden;
}

#paneltwo li a {
color:#fff;
display:block;
padding:10px;
}

#paneltwo li a:hover {
color:#00c6ff;
}

#paneltwo li.linkOne,
#paneltwo li.linkTwo,
#paneltwo li.linkThree,
#paneltwo li.linkFour,
#paneltwo li.linkFive {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne,
#paneltwo:hover li.linkTwo,
#paneltwo:hover li.linkThree,
#paneltwo:hover li.linkFour,
#paneltwo:hover li.linkFive {
-moz-transform:translateX(0px);
-moz-transition: all 1s ease-in-out;
-webkit-transform:translateX(0px);
-webkit-transition: all 1s ease-in-out;
-o-transform:translateX(0px);
-o-transition: all 1s ease-in-out;
}

#paneltwo li.linkOne {
-moz-transform:translateX(-90%);
-moz-transition-delay:0.6s;

-webkit-transform:translateX(-90%);
-webkit-transition-delay:0.6s;

-o-transform:translateX(-90%);
-o-transition-delay:0.6s;

z-index:5;
}

#paneltwo li.linkTwo {
-moz-transform:translateX(-180%);
-moz-transition-delay:0.5s;

-webkit-transform:translateX(-180%);
-webkit-transition-delay:0.5s;

-o-transform:translateX(-180%);
-o-transition-delay:0.5s;

z-index:4;
}

#paneltwo li.linkThree {
-moz-transform:translateX(-270%);
-moz-transition-delay:0.4s;

-webkit-transform:translateX(-270%);
-webkit-transition-delay:0.4s;

-o-transform:translateX(-270%);
-o-transition-delay:0.4s;

z-index:3;
}

#paneltwo li.linkFour {
-moz-transform:translateX(-360%);
-moz-transition-delay:0.3s;

-webkit-transform:translateX(-360%);
-webkit-transition-delay:0.3s;

-o-transform:translateX(-360%);
-o-transition-delay:0.3s;
z-index:2;
}

#paneltwo li.linkFive {
-moz-transform:translateX(-450%);
-moz-transition-delay:0.2s;

-webkit-transform:translateX(-450%);
-webkit-transition-delay:0.2s;

-o-transform:translateX(-450%);
-o-transition-delay:0.2s;

z-index:1;
}

#paneltwo:hover li.linkOne {
-moz-transition-delay:0s;
-webkit-transition-delay:0s;
-o-transition-delay:0s;
z-index:5;
}

#paneltwo:hover li.linkTwo {
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-o-transition-delay:0.2s;
z-index:4;
}

#paneltwo:hover li.linkThree {
-moz-transition-delay:0.4s;
-webkit-transition-delay:0.4s;
-o-transition-delay:0.4s;
z-index:3;
}

#paneltwo:hover li.linkFour {
-moz-transition-delay:0.6s;
-webkit-transition-delay:0.6s;
-o-transition-delay:0.6s;
z-index:2;
}

#paneltwo:hover li.linkFive {
-moz-transition-delay:0.8s;
-webkit-transition-delay:0.8s;
-o-transition-delay:0.8s;
z-index:1;
}

<div id="paneltwo">
<li class="mask"><h3>MENU2 ></h3></li>
<li class="linkOne"><a href="#">Link 1</a></li>
<li class="linkTwo"><a href="#">Link 2</a></li>
<li class="linkThree"><a href="#">Link 3</a></li>
<li class="linkFour"><a href="#">Link 4</a></li>
<li class="linkFive"><a href="#">Link 5</a></li>

</div>