CSS3邊框過渡

Question

當您將鼠標懸停在列表項上時，我試圖為紅色邊框添加過渡效果，但是該過渡僅在您將鼠標懸停時才起作用。

是否可以為紅色邊框添加一個過渡，以便當您將鼠標懸停時將其滑出？ 這是代碼http://jsbin.com/ewilix/3/edit

Answer 1

您必須為初始左邊框指定與懸停狀態相同的屬性，但寬度為0：

#conteneur-menu2 ul li a {
    text-decoration: none;
    font-size: 25px;
    padding: 4px;
    display: block;
    color: white;
    width: 230px; 
    transition: all 2s;
    line-height: 20px;
    border-left-style: solid;
    border-left-color: red;
    border-left-width: 0px;
}