用不同的计时函数转换x和y？

Question

目前，我正在使用以下代码以相同的速度转换x和y：

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

我想将X轴平移得比Y轴慢。是否可以指定类似于：

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

提前感谢！

Answer 1

不幸的是，这是事实:你不能对transform的不同部分使用不同的计时，因为它现在只有一个属性，不能被拼接。

你唯一能做的就是：

• 仅对一个轴使用translate，对另一个轴使用定位(如top或left)。这样做你可以附加不同的计时。
• 使用两个包装的块，所以你可以在它们上使用不同的transform。这将需要更多的代码，但如果您需要图形处理器acceleration.

，这将是有帮助的

我们没有别的办法了：

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