有没有一种方法可以使第二个动画不被覆盖

Question

所以我尝试用逗号分隔动画，并将它们放在同一个变换上，但仍然不起作用。

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: silver;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 20%;
height: 20%;
background-color: pink;
transform: rotate(0deg) translatey(0px);
animation: wavy 3s linear infinite alternate,
float 3s linear infinite alternate;
}
@keyframes wavy {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}

<div class="container">
<div class="box"></div>
</div>

这里有一个代码笔的链接：

https://codepen.io/FaroukHamadi/pen/OJOWWKW

Answer 1

Yes-在div中添加一个id，并将该动画设置在指定的id上。例如，我将其称为#box

EDIT~我以前完美地处理过id解决方案，除非keyframe中使用了两个transforms，这就是您的情况。我建议将两个动画合并为一个动画，并使用更多的%增量。因此，你可以使用0、25、50、75、100来代替0、50和100，将两者结合起来，使其看起来像是"0"；交替的"；

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: silver;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 20%;
height: 20%;
background-color: pink;
transform: rotate(0deg) translatey(0px);
animation: wavy-float 3s linear infinite alternate;
}

@keyframes wavy-float {
0% {
transform: rotate(0deg):
}
25% {
transform: rotate(-20deg);
}
50% {
transform: translateY(-20px);
}
75% {
transform: rotate(20deg);
}
100% {
transform: translateY(20px)
}
}

<div class="container">
<div class="box"></div>
</div>