CSS边框不会生成动画

Question

由于某些原因，当我将鼠标悬停在div上时，边框会正确动画，但是鼠标悬停不会产生转换。我错过了什么？

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

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

边界不能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; 
    } 
}