<div id="box" style="width: 100px; height: 100px; background: #f85455;position: absolute;"></div>
var Tween = {
    Quad: {        easeOut: function(t, b, c, d) {
            return -c *(t /= d)*(t-2) + b;
        }
    }
};

var box = document.getElementById("box");
// t: 当前时间; b: 初始值;c: 变化量; d: 持续时间
var b = 50, c = 100, d = 100, t = 0;
// 定时器
var timer = null;
run();
function run() {
    box.style.left = Math.ceil(Tween.Quad.easeOut(t, b, c, d)) + "px";
    t++;
    timer = setTimeout(run, 1000 / 60);
    if(t >= d) {
        clearTimeout(timer);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.