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: 30px;
}

JavaScript

var ball = document.getElementsByClassName(".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);
}
});