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

Question

当用户点击“space”时，我在运行元素上有一个基本的固定动画：

&.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;
    }
}

现在，我想在 onkeydown 添加不同的其他变换动画，它们将运行与当前动画同时进行，例如：

&.spin {
        animation: spin 500ms ease-out 20ms 1 forwards;
    }

@keyframes spin {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

所以我的问题是，当我添加第二个“旋转”class 时，它运行覆盖了我的第一个“弹出”动画。添加它而不是运行结束的方法是什么？

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>

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

How to apply a new transform animation while other one is running on the same element

html

javascript

css

sass

less

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

How to apply a new transform animation while other one is running on the same element

html

javascript

css

sass

less

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