css - matrix scale transition not working -


i have use transform matrix animate transform: scale of element.

i want scale 0 1. if use following code 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 use matrix itself, 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 doing wrong or not working? i'm wondering, because doesn't work in chrome , firefox...

the console_log debug output says @ scaling 0 1 matrix gets set matrix(0,0,0,0,0,0) matrix(1,0,0,1,0,0).

edit:

total confusion... if change scalex , scaley values in matrix 0.1 or 0.01 works... wow

when animating or transitioning transforms, transform function lists must interpolated. 2 transform functions same name , same number of arguments interpolated numerically without former conversion. calculated value of same transform function type same number of arguments.

special rules apply rotate3d(), matrix(), matrix3d() , perspective(). transform functions matrix(), matrix3d() , perspective() converted 4x4 matrices first , interpolated. if 1 of matrices interpolation singular or non-invertible (iff determinant 0), transformed element not rendered , used animation function must fall-back discrete animation according rules of respective animation specification.

then in case of matrix(0,0,0,0,0,0) it's obvious, 4x4 result matrices scale singulars

credits http://www.w3.org/tr/css3-2d-transforms/


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -