CSS Transition with a table cell width

Question

I trying to make a horizontal accordion, but I can't figure out how do I get the "cells" to unwrap smoothly. Here is the fiddle: https://jsfiddle.net/vf1z1ebp/4/

Transition clearly works with the background and font color upon hover, but the width just jumps instantly. I thought it might be because the other three cells have auto width, but that doesn't seem to be the problem as this one doesn't work either: https://jsfiddle.net/vf1z1ebp/5/

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

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

What am I doing wrong?

Answer 1

For transition to work you have to give a width to the element like this.Transitions can only animate across numerical values

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