Using CSS transitions in CSS Grid Layout

According to the spec, transitions should work on grid-template-columns and grid-template-rows.

7.2. Explicit Track Sizing: the grid-template-rows and
grid-template-columns
properties

Animatable: as a simple list of length, percentage, or calc, provided
the only differences are the values of the length, percentage, or calc
components in the list

So, if my interpretation is correct, as long as the only changes are to the values of the properties, with no changes to the structure of the rule, transitions should work. But they don’t.

UPDATE

This does work but is so far only implemented in Firefox. Follow here
for other browser updates.
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

~ a contribution in the comments by @bcbrian

Here’s a test I created:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
  
  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

jsFiddle demo

In the test, the transition works on the height and background color, but not on grid-template-rows or grid-template-columns.