matrix scale transition not working

Question

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

Very strange! Looks like other matrix transform values struggle to animate too jsfiddle.net/zvgcg0o0. For whatever reason, IE11 handles both of your demos and what I just made without a problem. — sudo rm -rf slash
– sudo rm -rf slash, Commented May 29, 2015 at 13:14
You answered your own question, really. 0.001 is as small as you can go and still have transitions. I'm not sure the exact reason why a zero disables animations, but it does. — Wray Bowling
– Wray Bowling, Commented May 29, 2015 at 19:04
Doesn't look like a bug report exists for this, it might be worthy of filing one. If it's not indeed a bug (I'm not sure how it wouldn't be), you at least might get an engineer to clarify the behaviour: code.google.com/p/chromium/issues/entry — Adam Jenkins
– Adam Jenkins, Commented May 29, 2015 at 22:05
I created an issue and I got the answer, YandY Viera mentioned. code.google.com/p/chromium/issues/detail?id=494914 So this is not a bug and won't be fixed. — yacon
– yacon, Commented Jun 8, 2015 at 5:27

Yandy_Viera · Accepted Answer · 2015-06-07 07:28:02Z

When animating or transitioning transforms, the transform function lists must be interpolated. Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments.

Special rules apply to rotate3d(), matrix(), matrix3d() and perspective(). The transform functions matrix(), matrix3d() and perspective() get converted into 4x4 matrices first and interpolated. If one of the matrices for interpolation is singular or non-invertible (iff its determinant is 0), the transformed element is not rendered and the used animation function must fall-back to a discrete animation according to the rules of the respective animation specification.

Then in the case of matrix(0,0,0,0,0,0) it's obvious, the 4X4 result matrices for scale are singulars

Credits for http://www.w3.org/TR/css3-2d-transforms/

Collectives™ on Stack Overflow

matrix scale transition not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related