CSS Ping Pong

dabblet.css

/**
 * CSS Ping Pong	
 */
body {
	background-color: #ccc;
}

div {
	background-color: green;
	background-image: linear-gradient(top, transparent, #fff, transparent),
		linear-gradient(transparent, rgba(255, 255, 255, 0.8), transparent);
	background-repeat: repeat-y, repeat-x;
	background-position: 50% top, left 50%;
	background-size: 2px auto, auto 6px;
	border: 4px solid #fff;
	height: 340px;
	margin: 0 auto;
	position: relative;
	width: 90%;
}

b {
	animation-name: bounce;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	animation-timing-function: ease;
	background: #fff linear-gradient(#fff, rgba(0, 0, 0, 0.1)) no-repeat left top;
	border-radius: 11px;
	display: block;
	height: 14px;
	left: 5%;
	overflow: hidden;
	position: absolute;
	text-indent: 100%;
	top: 80%;
	width: 14px;
}

@keyframes bounce {
	0% {
		box-shadow: rgba(0, 0, 0, 0) 0 20px 20px;
		left: 5%;
		top: 80%;
		height: 11px;		
		width: 11px;
	}
	
	12.5% {
		box-shadow: rgba(0, 0, 0, 0.5) 0 50px 20px;
		height: 22px;
		width: 22px;
	}
	
	25% {
		box-shadow: none;
		left: 90%;
		top: 2%;
		height: 11px;				
		width: 11px;
	}
	
	37.5% {		
		box-shadow: rgba(0, 0, 0, 0.5) 0 50px 20px;
		height: 22px;
		width: 22px;
	}
	
	50% {
		box-shadow: none;
		left: 2%;
		top: 45%;
		height: 11px;
		width: 11px;
	}
	
	62.5% {				
		box-shadow: rgba(0, 0, 0, 0.5) 0 50px 20px;
		height: 22px;
		width: 22px;
	}
	
	75% {
		box-shadow: none;
		left: 98%;
		top: 90%;
		height: 11px;
		width: 11px;
	}
	
	87.5% {						
		box-shadow: rgba(0, 0, 0, 0.5) 0 50px 20px;
		height: 22px;
		width: 22px;
	}
	
	100% {
		left: 5%;
		top: 80%;
		height: 11px;
		width: 11px;
	}
}

dabblet.html

<div>
	<b>ball</b>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}