Translate x and y with a different timing functions?

Question

Currently I'm using the following code to translate both x and y at the same speed:

-webkit-transition:all 180ms ease-out;

I would like to translate the X axis slower than the Y. Is it possible to specify something similar to:

-webkit-transition:translateX 180ms ease-out;
-webkit-transition:translateY 50ms ease-out;

Thanks in advance!

Answer 1

Sad but true: you can't use different timings for different parts of transform since it's now only one property and cannot be spliced.

The only things you can do:

• Use translate only for one axis, and use the positioning for another (like top or left). Doing so you could attach different timings.
• Use two wrapped blocks, so you could use different transforms on them. It would take more code, but would be helpful if you'll need the GPU acceleration.

No other ways for us :(