css3: two transitions with different timing functions (css3)

Question

I want to use a transform for both scale and translateX, but each with a different timing function. Currently I have it working with absolute positioning instead of translateX, as follows:

transition: transform 500ms cubic-bezier(0.390, -0.600, 1.000, -0.600), 
            left 500ms cubic-bezier(0.270, 0.875, 0.575, 0.870);

.

left: -50px ;
transform: scale(2,2) ;

How would you rewrite this to achieve the same, but use translateX instead of left ?

Answer 1

In this case, I would probably use a wrapper and transition one of the two transforms for the wrapper and the other one for the element itself.

demo

HTML:

<div class='wrap'>
  <div class='el'></div>
</div>

Relevant CSS:

.wrap {
  transition: transform .5s cubic-bezier(.39, -.6, 1, -.6);
}
.el {
  transition: transform .5s cubic-bezier(.27, .875, .575, .87);
}
.wrap:hover { transform: scale(2,2); }
.wrap:hover .el { transform: translateX(-50px); }

Not sure it's a better idea than simulating a translateX by using left.

Another idea would be not to use a transition, but an animation and set the keyframes such that to obtain the desired effect.