Css 如何添加两个变换，但一个接一个？

我想添加2个转换

但是我想在第一个变换结束后开始第二个变换

元素应缓慢移动到一点，然后移动到另一点

transform: translate(0%, 300%), translate(15%, -136%);

---

您不能使用

transition

仅使用单个元素来执行此操作，因为当您在转换中放置多个translate时，转换属性总体上是转换的，而不是逐个转换的

使用额外的包装器元素进行纯CSS转换：

如果在实际元素周围添加一个额外的包装器元素，并将其中一个转换放在包装器元素上，则可以实现所需的效果。它还会在悬停时产生完全相反的效果（在下面的代码段中悬停主体和悬停）

.wrapper{
位置：相对位置；
高度：100px；
宽度：100px；
过渡：所有1；
}
.内容{
位置：绝对位置；
身高：100%；
宽度：100%；
边框：1px实心；
过渡：所有1；
}
body:hover.content{
转换：翻译（15%，-136%）；
过渡：所有1；
}
正文：hover>.wrapper{
转换：翻译（0%，300%）；
过渡：所有1；
}
身体{
最小高度：100vh；
}

一些文本

如果两个变换都设置在同一个元素上，则使用

转换

不可能实现这一点。你可以使用

动画

，但动画不同于

过渡

，会产生相反的效果（比如悬停，很难实现）。非常感谢，我将搜索使用动画而不是过渡的能力如果你愿意，我可以在这里给出解决方案：）谢谢你的帮助：），在使用之前，我将学习这项技术，我可能会经常使用jquery animate和cssThanks，我将检查这些片段，感谢您的时间，You's welcome@Egypt。我不知道你对使用jQuery很在行。如果可以这样做，那么也可以使用

transition

和单个元素来完成。我已经在我的答案中添加了一个示例。检查它是否对你有帮助：）谢谢：），现在一切正常，谢谢你写的每一个字符