用不同的定時功能翻譯x和y？

Question

目前我使用下面的代碼以相同的速度x和y翻譯：

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

我想比Y.慢是否可以指定類似X軸翻譯：

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

在此先感謝！

Answer 1

不幸的是，您不能對transform的不同部分使用不同的定時，因爲它現在只有一個屬性，不能拼接。

唯一的東西，你可以這樣做：

• 使用translate只爲一個軸，並使用定位另一個（類似top或left）。這樣做你可以附加不同的時間。
• 使用兩個包裹塊，所以你可以使用不同的transform。這將需要更多的代碼，但如果您需要GPU加速將會很有幫助。

沒有其他的方法可以使我們:(

Answer 2

並不理想，但你可以轉換一個維度，改變另一個屬性，如left另...

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

演示http://jsfiddle.net/DFLL7/

Answer 3

我不確定，但也許你可以試試。

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