css3 - CSS border won't animate -

for reason, when hover on div, border animates properly, mousing off of produces no transition. missing?

http://codepen.io/anon/pen/xbpbvr

html:

<div class="test">   test </div> 

less:

.test {   background: #eee;   border-bottom: none;   width: 300px;   height: 300px;   transition: border 100ms ease-out;    &:hover {     border-bottom: 5px solid black;     transition: border 100ms ease-out;   } } 

if want no border, can animate color transparent , length 0:

.test {    background: #eee;    border-bottom: 0px solid transparent;    width: 300px;    height: 300px;    transition: border 100ms ease-out;  }    .test:hover {    border-bottom: 5px solid black;  }

<div class="test">    test  </div>