CSS3 div move on hover not ease-out

Question

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

Answer 1

This is because the divs are only position: relative on hover, which is not animatable. The animation effect on left is lost when it switches back to position: static. Simply add position: relative to the un-hovered style.

http://jsfiddle.net/Pre5p/