动画实现原理

核心原理：通过定时器setinterval()不断移动盒子位置

实现步骤

1.获得盒子当前位置

2.让盒子在当前位置加上移动距离

3.利用定时器不断重复这个操作

4.加一个结束定时器的条件

5.注意此元素需要添加定位才能使用element.style.left

<div></div>
    <script>
        //获取元素
        var div = document.querySelector('div');

        //添加定时器
        var timer = setInterval(function() {
            if (div.offsetLeft >= 200) {
                //添加停止定时器，让盒子停下来
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 100)
    </script>