console
<div class="outer">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
*{
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
body{
background-color: white;
}
.outer{
width: 800px;
height: 400px;
outline: 1px solid red;
display: flex;
justify-content: space-evenly;
align-items: end;
}
.outer div{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: green;
}
@keyframes jump{
0% {
transform: translateY(0);
}
50% {
transform: translateY(-200px);
}
100% {
transform: translateY(0);
}
}
.one, .two, .three{
animation-name: jump;
animation-duration: 1s;
animation-iteration-count: 2;
}
.two{ animation-delay: 0.2s;}
.three{ animation-delay: 0.4s;}