title: CSS Transitions: Border Slides Instead of Fading
body: <p>I styled a link so that when you hover it,  there will appear a border on the top;  and when you hover off the border will disappear with a transition. The border slides in instead of fading in when you hover over it and off. I want the border to fade in instead of slide. How can I do this? Here is a <a href="http://jsfiddle.net/kLnQL/8/" rel="noreferrer">JsFiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;Text&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
      line-height: 50px;
      width: 100px;
      text-align: center;
      cursor: pointer;
      transition: border .2s ease-in-out;
      -webkit-transition: border .2s ease-in-out;
      -moz-transition: border .2s ease-in-out;
  }
  
  div:hover {
      border-top: 3px solid #000;
  }
  
  html, body {
      margin: 0;
      padding: 0;
  }
  </code></pre>