After attempting to separate the animations with a comma and placing them on the same transform, I am still encountering issues.
* {
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>For further reference, you can view the codepen here: