(demo)动画实现原理

动画原理

1. 获得盒子当前位置
2. 让盒子在当前位置上加1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

css：

    .box {
      position: relative;
      width: 200px;
      height: 200px;
      background: antiquewhite;
    }

body：

<div class="box"></div>
  <script>
    var box = document.querySelector('.box')
    var timer = setInterval(() => {
      if(box.offsetLeft >= 400){
        clearInterval(timer)
      }
      box.style.left = box.offsetLeft + 1 +'px'
    }, 50);
  </script>