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
Comments
Post a Comment