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