9

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

yacon
  • 1,112
  • 1
  • 10
  • 17
  • Very strange! Looks like other matrix transform values struggle to animate too https://jsfiddle.net/zvgcg0o0/. For whatever reason, IE11 handles both of your demos and what I just made without a problem. – sudo rm -rf slash May 29 '15 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 May 29 '15 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: https://code.google.com/p/chromium/issues/entry – Adam Jenkins May 29 '15 at 22:05
  • I created an issue and I got the answer, YandY Viera mentioned. https://code.google.com/p/chromium/issues/detail?id=494914 So this is not a bug and won't be fixed. – yacon Jun 08 '15 at 05:27

1 Answers1

3

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/

Yandy_Viera
  • 4,320
  • 4
  • 21
  • 42