matrix scale transition not working

Question

I have to use the transform matrix to animate transform: scale of an element.

I want to scale from 0 to 1. If I use the following code it works properly:

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: scale(0);
    transition: transform 1s;
}
.container.open {
    transform: scale(1);
}

https://jsfiddle.net/w4kuth78/1/

If I use the matrix itself, it is not working.

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: matrix(0, 0, 0, 0, 0, 0);
    transition: transform 1s;
}
.container.open {
    transform: matrix(1, 0, 0, 1, 0, 0);
}

https://jsfiddle.net/m7qpetkh/1/

Am I doing anything wrong or is this just not working? I'm wondering, because it doesn't work in Chrome and Firefox...

The console_log debug output says that at scaling from 0 to 1 the matrix gets also set from matrix(0,0,0,0,0,0) to matrix(1,0,0,1,0,0).

EDIT:

Total confusion... If I change the scaleX and scaleY values in the matrix to 0.1 or 0.01 it works... wow

Answer 1

When animating or transitioning transforms, the transform function lists must be interpolated. Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments.

Special rules apply to rotate3d(), matrix(), matrix3d() and perspective(). The transform functions matrix(), matrix3d() and perspective() get converted into 4x4 matrices first and interpolated. If one of the matrices for interpolation is singular or non-invertible (iff its determinant is 0), the transformed element is not rendered and the used animation function must fall-back to a discrete animation according to the rules of the respective animation specification.

Then in the case of matrix(0,0,0,0,0,0) it's obvious, the 4X4 result matrices for scale are singulars

Credits for http://www.w3.org/TR/css3-2d-transforms/