Translate x and y with a different timing functions?

问题

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!

回答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 :(

回答2:

Not ideal, but you could translate one dimension and change another property, such as left on the other...

-webkit-transition: left 180ms ease-out, -webkit-transform 50ms ease-out;

Demo http://jsfiddle.net/DFLL7/

回答3:

I'm not sure, but maybe you can try.

.m01 { -webkit-animation:test_XY 3.5s 1.5s ease both;  }



@-webkit-keyframes test_XY {
0%{ -webkit-transform:translateX(450px)}
70%{ -webkit-transform:translateX(-1px)}
80%{ -webkit-transform:translateX(0)}
95%{ -webkit-transform:translateY(-95px)}
100%{ -webkit-transform:translateY(-90px)}
}

来源：https://stackoverflow.com/questions/8914342/translate-x-and-y-with-a-different-timing-functions