用不同的计时函数翻译 x 和 y？答案

【问题标题】：Translate x and y with a different timing functions?用不同的计时函数翻译 x 和 y？
【发布时间】：2012-02-13 10:05:52
【问题描述】：

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

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

我想平移 X 轴的速度比 Y 轴慢。是否可以指定类似的内容：

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

提前致谢！

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

悲伤但真实：你不能对transform的不同部分使用不同的时间，因为它现在只有一个属性，不能拼接。

你唯一能做的事：

仅将translate 用于一个轴，并将定位用于另一个轴（如top 或left）。这样做可以附加不同的时间。
使用两个包裹的块，这样你就可以在它们上使用不同的transforms。这需要更多代码，但如果您需要 GPU 加速，这会很有帮助。

我们没有其他方法:(

【讨论】：

【解决方案2】：

不理想，但您可以转换一个维度并更改另一个属性，例如另一个属性，例如 left...

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

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

【讨论】：

【解决方案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)}
}

【讨论】：

欢迎来到 SO，Iris Monkey。