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>