具有表格单元格宽度的CSS转换

我试着做一个水平的手风琴，但我不知道如何才能让“细胞”顺利展开。这是小提琴：

在悬停时，“过渡”显然与背景和字体颜色一起工作，但宽度会立即跳跃。我认为这可能是因为其他三个单元格具有自动宽度，但这似乎不是问题，因为这一个也不起作用：

以下是HTML：

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

---

我做错了什么？谢谢你的回答！Malej Pštros.

对于要工作的过渡，您必须像这样为元素指定一个

宽度

。过渡只能跨数值设置动画

#矩阵{
宽度：100%；
高度：100px；
}
.项目{
垂直对齐：中间对齐；
文本对齐：居中；
边框：2件纯黑；
字体大小：35px；
宽度：10%；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：所有1s；
过渡：所有1；
过渡定时功能：易进易出；
-moz转换计时功能：轻松输入输出；
-webkit转换计时功能：轻松输入输出；
-o-转换-定时-功能：易于输入输出；
}
.项目：悬停{
宽度：50%；
背景色：黑色；
颜色：白色；
}

一个
两个
三
四

它可以工作：！所以为了正确转换，不仅要指定目标值，还要指定起始值，对吗？谢谢你的回答！是否有可能摆脱抽搐？MalejPštros最好的选择是减少时间并使用计时功能。如果您希望td宽度是硬编码的，您可以将其更改为线性。它不是动态的。你的方法没有什么特别之处，很普通。@Green你说的“硬核”是什么意思？我刚刚更新了他的代码，使它像他想要的那样有生气

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