<div id="redball"></div>
@keyframes bounce {
from, to {
transform: translateY(30vh) scaleY(.98);
}
80% {
transform: translateY(15vh) scaleY(1.02);
}
}
#redball {
border-radius: 50%;
width: 20vw;
height: 20vw;
max-width: 250px;
max-height: 250px;
background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000);
margin: 0 auto;
transform-origin: center bottom;
animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}
This Pen doesn't use any external CSS resources.