Граница CSS не будет анимировать

Question

По какой-то причине, когда я наводил курсор на div, граница анимирована должным образом, но слияние с ней не приводит к переходу. Что мне не хватает?

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

HTML:

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

МИНУС:

.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; 
    } 
} 

Answer 1

Если вы действительно не хотите, нет границы, вы можете анимировать цвет прозрачным и длину до 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>

Answer 2

Вы не можете анимировать пограничному дна: нет, изменить, что границы дна: RGBA (0, 0,0,0) (или, возможно, border-bottom: прозрачный, если это работает).

Вы также не нуждаетесь в «переходе: граница 100 мс» в области наведения.

Answer 3

Border не может быть none. Попробуйте следующее:

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

    &:hover { 
    border-bottom: 5px solid black; 
    transition: border 100ms ease-out; 
    } 
}