CSS轉換表格單元格寬度

Question

我試圖製作一個水平手風琴，但我無法弄清楚如何獲得「單元格」以平滑展開。這裏是小提琴：https://jsfiddle.net/vf1z1ebp/4/

轉換顯然適用於懸停時的背景和字體顏色，但寬度只是立即跳轉。我想這可能是因爲其他三個單元具有自動寬度，但似乎並不成爲問題，因爲這一個不工作之一：https://jsfiddle.net/vf1z1ebp/5/

這裏的HTML：

​​

而且CSS：

#matrix { 
    width: 100%; 
    height: 100px; 
} 

.item { 
    vertical-align: middle; 
    text-align: center; 
    border: 2px solid black; 
    font-size: 35px; 

    -webkit-transition: all 3s; 
    -moz-transition: all 3s; 
    -o-transition: all 3s; 
    transition: all 3s; 
} 

.item:hover { 
    width: 50%; 
    background-color: black; 
    color: white; 
} 

我在做什麼錯？感謝您的回答！ MalejPštros。

Answer 1

過渡到工作，你必須給一個width像this.Transitions元素，則只能在數值

#matrix { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
.item { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    border: 2px solid black; 
 
    font-size: 35px; 
 
    width: 10%; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    transition: all 1s; 
 
    transition-timing-function: ease-in-out; 
 
    -moz-transition-timing-function: ease-in-out; 
 
    -webkit-transition-timing-function: ease-in-out; 
 
    -o-transition-timing-function: ease-in-out; 
 
} 
 
.item:hover { 
 
    width: 50%; 
 
    background-color: black; 
 
    color: white; 
 
}

<table id="matrix"> 
 
    <tr> 
 

 
    <td class="item"> 
 
     One 
 
    </td> 
 

 
    <td class="item"> 
 
     Two 
 
    </td> 
 

 
    <td class="item"> 
 
     Three 
 
    </td> 
 

 
    <td class="item"> 
 
     Four 
 
    </td> 
 

 
    </tr> 
 
</table>