Edit in JSFiddle

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var area = document.getElementById('area'),
    ball = document.getElementById('ball'),
    floor = document.getElementById('floor');

var speed = 5, deltaT = 1;
var bottomLine = area.offsetHeight - floor.offsetHeight - ball.offsetHeight;
var stopAnimation = false;

var animate = function (now) {
    if (stopAnimation) return false;
    
    var top = parseInt(ball.style.top, 10) || 0,
        shift = calculateShift(speed, deltaT);

    if (top + shift < bottomLine) {
        top += shift;
    } else {
        top = bottomLine;
        stopAnimation = true;
    }

    ball.style.top = top + 'px';

    requestAnimationFrame(animate);
};

var calculateShift = function (speed, deltaT) {
    return speed / deltaT;
};

requestAnimationFrame(animate);
<header id="header">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="resume">Resume</button>
    <button id="reset">Reset</button>
</header>
<div id="area">
    <div id="ball"></div>
    <div id="floor"></div>
</div>
#header {
    display: none;
    
    border-bottom: 1px solid #aaa;
}

#area {
    position: relative;
   
    height: 25em;
}

#ball {
    position: absolute;
    
    top: 0;
    left: 50%;
    margin-left: -0.5em;
    
    width: 1em;
    height: 1em;
    
    border-radius: 50%;
    
    background-color: lightblue;
    box-shadow: 1px 1px 1px;
    
    transition: 500ms linear background-color;
}

#ball:hover {
    background-color: green;
}

#floor {
    position: absolute;
    
    bottom: 0;
    
    width: 100%;
    height: 5px;
    
    background: green;
}