<div class="circle"></div>
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.circle{
background: red;
width: 100px;
height: 100px;
border-radius: 50%;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 50%, 100% {transform: translateY(0);}
40% {transform: translateY(-120px);}
60% {transform: translateY(-15px);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.