/ Transição de escala de matriz / não está funcionando - css, css-transições, css-transformações, conversão de escala, matriz de transformação

transição de escala de matriz não funciona - css, css-transições, css-transforms, scaletransform, matrix-transform

Eu tenho que usar a matriz de transformação para animar a transformação: escala de um elemento.

Eu quero escalar de 0 a 1. Se eu usar o seguinte código, ele funcionará corretamente:

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

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

Se eu usar a matriz em si, é não trabalhando.

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

Estou fazendo algo errado ou isso simplesmente não está funcionando? Eu estou querendo saber, porque ele não funciona no Chrome e Firefox ...

A saída debug console_log diz que na escala de 0 para 1, a matriz também é definida da matriz (0,0,0,0,0,0) para a matriz (1,0,0,1,0,0).

EDITAR:

Confusão total ... Se eu mudar os valores de scaleX e scaleY na matriz para 0.1 ou 0.01, ele funciona ... wow

Respostas:

2 para resposta № 1

Ao animar ou transicionar transformações, oas listas de funções de transformação devem ser interpoladas. Duas funções de transformação com o mesmo nome e o mesmo número de argumentos são interpoladas numericamente sem uma conversão anterior. O valor calculado será do mesmo tipo de função de transformação com o mesmo número de argumentos.

Regras especiais se aplicam a rotate3d (), matrix (),matrix3d ​​() e perspectiva (). As funções de transformação matrix (), matrix3d ​​() e perspective () são convertidas em matrizes 4x4 primeiro e interpoladas. Se uma das matrizes para interpolação é singular ou não-invertível (se seu determinante é 0), o elemento transformado não é renderizado e a função de animação usada deve retornar a uma animação discreta de acordo com as regras da respectiva especificação de animação.

Então, no caso da matriz (0,0,0,0,0,0), é óbvio que as matrizes de resultado 4X4 para escala são singulares

Créditos para http://www.w3.org/TR/css3-2d-transforms/