<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;
}