Edit in JSFiddle

var redbox = document.getElementById("redbox-07");
var startBtn = document.getElementById("redbox-btn-07");
var input = document.getElementById("redbox-input-03");
var startTime, duration;
var rect = redbox.getBoundingClientRect();
var startX = 0, endX = 520 - rect.width * 2;
var setX = function(element, x) {    
    var t = "translateX(" + x + "px) translateZ(0)";  
    var s = element.style;  
    s["transform"] = t;    
    s["webkitTransform"] = t;   
    s["mozTransform"] = t;    
    s["msTransform"] = t; 
}
var easeIn = function(t) {
    // return t * (1 - t * t) + t; // < random experiment
    return t * t;
}
var run = function() {
    var time = (new Date().getTime() - startTime) / duration;
    if(time < 1) { requestAnimationFrame(run);
                  time = easeIn(time);
                  setX(redbox, startX + (endX - startX) * time);
                 } else {
                     setX(redbox, endX);
                 }
}
var start = function() {
    duration = input.value;
    startTime = new Date().getTime();
    run();
}
startBtn.addEventListener('click', start);

<div class="demo">
    <div class="redbox" id="redbox-07"></div>
</div>
<div class="input">
	Duration <input type="text" value="2000" id="redbox-input-03"> ms.
</div>
<ul class="buttons">
    <li id="redbox-btn-07">Start</li>
</ul>

.demo {
    position: relative;
    width: 100%;
    min-height: 100px;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 1em 0 0 0;
}
.redbox {
    position: absolute;
    min-width: 50px;
    height: 50px;
    background-color: #f00;
    top: 25px;
    left: 25px;
    color: #fff;
    text-align: center;
    padding: 1.0em 0.8em 0 0.8em;
    font-family: monospace;
    font-size: 1.4em;
}
ul.buttons {
    list-style-type: none;
    padding: 1em 0 1em 0;
    overflow: auto;
    margin-bottom: 0.5em;
}
.buttons li {
    float: left;
    font-family: 'Droid Sans', sans-serif;
    margin: 0 1em 0.1em 0;
    background-color: #000;
    color: #fff;
    padding: 0.3em 1.8em 0.3em 1.8em;
    border-radius: 6px;
    cursor: pointer;
    font-style: normal;
    list-style-image: none;
}
.input {
    padding: 5px 0 5px 0;
    font-size: 1.2em;
}