矩阵规模过渡不起作用

Question

我必须使用变换矩阵来动画变换:元素的比例.

我想从0扩展到1.如果我使用以下代码它可以正常工作:

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

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

如果我用的是矩阵本身,它是不工作的.

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

我做错了什么或者这不起作用？我想知道,因为它在Chrome和Firefox中不起作用......

console_log调试输出表示在从0到1的缩放时,矩阵也从矩阵(0,0,0,0,0,0)到矩阵(1,0,0,1,0,0)设置.

编辑:

完全混淆......如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01,它就可以工作......哇

Answer 1

当对变换进行动画处理或过渡时，必须对变换函数列表进行插值。两个具有相同名称和相同数量参数的变换函数在没有先前转换的情况下进行数值插值。计算值将具有相同的变换函数类型和相同数量的参数。

特殊规则适用于rotate3d()、matrix()、matrix3d() 和perspective()。变换函数matrix()、matrix3d() 和perspective() 首先转换为4x4 矩阵并进行插值。如果用于插值的矩阵之一是奇异的或不可逆的（只要其行列式为 0），则不会渲染变换后的元素，并且所使用的动画函数必须根据相应动画规范的规则回退到离散动画。

那么在矩阵(0,0,0,0,0,0)的情况下，很明显，尺度的4X4结果矩阵是奇异的

http://www.w3.org/TR/css3-2d-transforms/的学分