title: How to make reverse transition after :hover
body: <p>From my understanding of CSS3 transitions you have to specify the transition only in the base element and not in the <code>:hover</code> element, e.g. as described in the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" rel="nofollow">Mozilla documentation</a>. This should lead to a transition when the new properties from <code>:hover</code> are applied and reverse the transition as soon as you don't hover anymore. (Fiddle below code)</p>
  
  <pre><code>#test{
      position:absolute;
      height: 100px;
      width: 100px;
      background-color: #A8A8A8;
  
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #test:hover{
      border-bottom: 10px solid black;
  }
  </code></pre>
  
  <p>But this leads to fading-in only. When you stop hovering the border is instantly removed.
  <a href="http://jsfiddle.net/hcsamkjf/1/" rel="nofollow">http://jsfiddle.net/hcsamkjf/1/</a></p>
  
  <p>Any ideas?</p>