css - 用不同的计时函数翻译 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在它们上使用不同的 s。这将需要更多代码，但如果您需要 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)}
}