<div class="ball-container">
<div class="ball"></div>
</div>
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-200%); }
}
.ball {
animation: 300ms bounce infinite alternate;
animation-timing-function: cubic-bezier(0.38, 0.17, 0.11, 0.85);
}
.ball-container {
margin: 50px auto;
width: 100px;
height: 90px;
position: relative;
}
.ball {
width: 30px;
height: 30px;
position: absolute;
left: calc(50% - 15px);
bottom: 0;
background: black;
border-radius: 15px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.