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

发布于 2024-12-27 17:03:29 字数 268 浏览 4 评论 0原文

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

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

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

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

提前致谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最美的太阳 2025-01-03 17:03:29

悲伤但却是事实：您不能对 transform 的不同部分使用不同的计时，因为它现在只是一个属性并且无法拼接。

您唯一可以做的事情是：

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

我们没有其他办法:(

回复收藏 0 原文

笔芯 2025-01-03 17:03:29

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

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

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

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/

回复收藏 0 原文

找回味觉 2025-01-03 17:03:29

我不确定，但也许你可以尝试一下。

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

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

回复收藏 0 原文

~没有更多了~