title: CSS3 div move on hover not ease-out
body: <p>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...)</p>
  
  <p>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.</p>
  
  <p>I searched online and on StackOverflow, too, and applied all fixes/suggestions made, but I wasn't able to get it to work.</p>
  
  <p>Here's the code (to try, for example, on jsFiddle)</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="menu-container"&gt;
     &lt;div class="menu1"&gt;Menu 01&lt;/div&gt;
     &lt;div class="menu2"&gt;Menu 02&lt;/div&gt;
     &lt;div class="menu3"&gt;Menu 03&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>What am I doing wrong? Is there a way to fix it?</p>
  
  <p>Thanks in advance</p>