<div class="wrap">
<div class="ball"></div>
</div>
body {
display: flex;
min-height: 100vh;
}
.wrap {
height: 430px;
width: 82px;
margin: auto;
position: relative;
background: #81cfa2;
border-bottom: 20px solid yellowgreen;
}
.ball {
position: absolute;
top: 0px;
left: 1px;
width: 80px;
height: 80px;
border-radius: 100%;
background: #e24343 linear-gradient(105deg, #ecf56a, transparent);
animation: bounce 3s cubic-bezier(.1, .25, 1, .25) infinite forwards;
}
@keyframes bounce {
60%,80%,to{
transform: translateY(350px);
animation-timing-function: ease;
}
70% {transform: translateY(250px);}
90% {transform: translateY(300px);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.