title: CSS border won't animate
body: <p>For some reason, when I hover over the div, the border animates properly, but mousing off of it produces no transition. What am I missing?</p>
  
  <p><a href="http://codepen.io/anon/pen/XbPbvr" rel="nofollow">http://codepen.io/anon/pen/XbPbvr</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="test"&gt;
    Test
  &lt;/div&gt;
  </code></pre>
  
  <p>LESS:</p>
  
  <pre><code>.test {
    background: #eee;
    border-bottom: none;
    width: 300px;
    height: 300px;
    transition: border 100ms ease-out;
  
    &amp;:hover {
      border-bottom: 5px solid black;
      transition: border 100ms ease-out;
    }
  }
  </code></pre>