CODEWITHSUNDEEP
csscss-transitionscss-transforms
PotatoFro
PotatoFro

Reputation: 6638

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!

Upvotes: 4

Views: 6759

Answers (3)

Iris Monkey
Iris Monkey

Reputation: 11

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

Upvotes: 1

methodofaction
methodofaction

Reputation: 72385

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/

Upvotes: 1

kizu
kizu

Reputation: 43224

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

Upvotes: 6

Related Questions