Bounce

dabblet.css

/**
 * Bounce
 */
html {height: 97%;}
body {
	background-color: hsl(0,50%,50%);
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,.1));
	height: 100%;
}

@keyframes bounce {
	from {
		box-shadow: 0 200px 50px 0 rgba(0,0,0,0.1);
		bottom: 100%;
		transform: scale(1.2);
	}
	
	85% {
		box-shadow: 0 0 0 -5px rgba(0,0,0,0.2);
		bottom: 20%;
		transform: scale(1);
		height: 50px;
		width: 50px;

	}
	
	to {
		box-shadow: 0 0 0 -5px rgba(0,0,0,0.2);		bottom: 20%;
		transform: scale(1);
		bottom: 20%;
		height: 35px;
		width: 55px;

	}
}


@keyframes gravity {
	from {
		height: 200px;
	}
	
	to {
		height: 0;
	}
}

.gravity {
	height: 200px; width: 99%;
	position: absolute;
	bottom: 0;
	
	/*animation: gravity 5s linear 1s both;*/
}


.ball {
	background-image: radial-gradient(top, rgb(50,80,150) 20%, rgb(10,40,110));
	border-radius: 50%;
	box-shadow: 0 0 0 -5px rgba(0,0,0,0.2);
	width: 50px;
	height: 50px;
	bottom: 20px; right: 50%;
	position: absolute;

	animation: bounce 0.5s ease-in 1s infinite alternate both;
}

.ball:hover {
	animation-play-state: paused;
}

dabblet.html

<div class="gravity">
	<div class="ball"></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}