Css3: two transitions with different synchronization functions (css3)

Question

I want to use the conversion for scaleand translateX, but each one has a different synchronization function. I am currently working with absolute positioning instead translateXas 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 translateXinstead left?

Answer 1

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

demonstration

HTML:

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

Matching 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); }

, , translateX left.

transition, animation , .