1

I'm getting a weird behaviour in my animation when I'm using transition on transform:matrix(). I'm only changing one parameter, but in the transition it looks like it's handling multiple parameters.

Hard to explain, so here's an example:

div {
  width: 200px;
  height: 400px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  transform: matrix(1, -.5, 0, 1, 0, 0);
  transform-origin: left bottom;
  transition: transform .5s ease;
}
div:hover span {
  transform: matrix(1, 0, 0, 1, 0, 0);
}
<div>
  <span></span>
</div>

External jsbin link

As you can see, it's only supposed to animate the bottom right corner (the top left is animated too, but out of view), but it seems to be doing something strange in the upper left hand corner. Any ideas how to get around this? Is there some trick to transitioning between transform:matrix?

2 Answers 2

1

You can use transform: skewY(-28deg); rather than transform: matrix(1,-.5,0,1,0,0); and transform: skewY(0); rather than transform: matrix(1,0,0,1,0,0);

Like I say here

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.

maybe at some point in the transition(you'll have to do the math) appears a singular matrix and the animation function must fall-back to a discrete animation

Here is the full information

0

What you can do is to increase the scaleX and scaleY then decrease the translateX:

transform: matrix(1.2, 0, 0, 1.2, -30, 0);

DEMO

Trick? I don't think so, but it behaves like using skew in a photo editor (e.g Photoshop). If you skew an element and then skew it again to bring it back to its original state(by doing it slowly) you may see the same behaviour

2
  • Yeah, I started playing around with the scale as well, but as you can see, that creates another issue in the bottom left corner, where it will go up a bit, before going down again. Nitpicking, but I really want the whole thing to be as smooth as possible. I just want to understand why it's doing anything to the upper right corner. Because if I step through the animation "manually", there's at no point anything happening in the upper left corner...
    – peirix
    Oct 21, 2014 at 13:50
  • Oh... you can try to change the origin to (0,0) or to center, it may help a bit.
    – Xlander
    Oct 21, 2014 at 14:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.