<div class="ball"></div>
body {
margin: 0;
padding: 0;
background: linear-gradient(skyblue, white 450px, yellowgreen 0);
min-height: 100vh;
}
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}
.ball {
width: 0; height: 0; padding: 1.5em;
border-radius: 50%;
margin: auto;
background: red radial-gradient(at 30% 30%, #fdd, red);
animation: bounce 3s ease-in infinite;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.