如何在另一个变换动画在同一元素上运行时应用新的变换动画

Question

我在一个元素上有一个基本的固定动画，当用户点击"；空间"：

&.pop {
animation: pop 1s ease-in 20ms 1 normal both;
}

@keyframes pop {
0% {
transform: rotate(0deg);
transform-origin: 30px;
}
20% {
transform: rotate(-30deg);
transform-origin: 30px;
}
40% {
transform: rotate(-10deg) translate(-2px, -20px);
transform-origin: 30px;
}
60% {
transform: rotate(0deg) translate(0, -40px);
transform-origin: 30px;
}
80% {
transform: rotate(3deg) translate(2px, -20px);
transform-origin: 30px;
}
100% {
transform:translate(0,0);
transform-origin: 30px;
}
}

现在，我想在keydown上添加不同的其他变换动画，这些动画将与当前动画同时运行，例如：

&.spin {
animation: spin 500ms ease-out 20ms 1 forwards;
}
@keyframes spin {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(180deg);
}
}

所以我的问题是，当我添加第二个"；"旋转"；课上，它跑过了我的第一个"；pop"；动画有什么方法可以添加它而不是碾过？

Answer 1

如果我正确理解你的问题：
你可以在转换中使用多个动画：
就像这样：

transform: rotate(90deg) translate(150px, -230px); 

---

或者您可以使用另一种方法：
您可以用两个外部div包裹您的目标元素，并为每个div分配一个动画。
就像这样

<div class="apply_this_animation">
<div class="apply_this_animation_also">
<img src="https://via.placeholder.com/300x300" alt="#" />
</div>
</div>

并在CSS中使用它，如下所示：

<style>
.apply_this_animation {
transform: rotate(90deg); 
}
.apply_this_animation_also {
transform: translate(150px, -230px); 
}
</style>

阅读更多