JavaScript 动画

我正在尝试制作动画div moving 200px在 JavaScript 中水平排列。

下面的代码让它跳跃像素，但是有没有办法让它看起来动画而不使用 jQuery？

function () {
    var div = document.getElementById('challengeOneImageJavascript');
    div.style.left = "200px";
}

这是基本的动画设置：

function animate(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

To use:

animate(
    document.getElementById('challengeOneImageJavascript'),
    "left","px",0,200,1000
);

此示例将使给定元素在 1 秒（1000 毫秒）的时间内从 0px 线性滑动到 200px。