CSS3 div move on hover not ease-out

CSS3 div move on hover not ease-out

Ok guys, here's the problem: I made this simple menu with three
menu-items, and I want to move each div to the right every time I hover on
it (simple, right? Unfortunately not...)
While it does the ease-in animation, it won't do at all the ease-out one,
the result being not fluid, but blocky and not cool at all.
I searched online and on StackOverflow, too, and applied all
fixes/suggestions made, but I wasn't able to get it to work.
Here's the code (to try, for example, on jsFiddle)
HTML:
<div id="menu-container">
<div class="menu1">Menu 01</div>
<div class="menu2">Menu 02</div>
<div class="menu3">Menu 03</div>
</div>
CSS:
#menu-container div{
height: 30px;
width: 200px;
border:1px solid #999;
background-color:#222;
color:#ccc;
left: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#menu-container div:hover{
position: relative;
color:#fff;
background-color:#333333;
left: 20px;
padding-left: -20px;
}
#menu-container div.menu1:hover{
border-color: red;
}
#menu-container div.menu2:hover{
border-color: blue;
}
#menu-container div.menu3:hover{
border-color: green;
}
What am I doing wrong? Is there a way to fix it?
Thanks in advance