Bouncing Ball

by Megi93

HTML

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

CSS

body {
	background-color: #DDDDDD;    
}

.ball {
	background: Chocolate;
	position: absolute;
	left: 50%;
	top: 400px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	transition: all 500ms cubic-bezier(0.480, 0.485, 0.790, 0.755);
}

.active {
	top: 40px;
}

JavaScript

var ball = document.querySelector(".ball");

addEventListener('keydown', function bounce(e) {
	// use either which or keyCode, depending on browser support
	if (e.which == 32 || e.keyCode == 32){
		ball.classList.add("active");
		setTimeout(function(){
			ball.classList.remove('active');
		}, 300);
	}
});