JavaScript动画1-速度动画

动画实际上就是在一定时间内，改变一个元素的某些属性。

这里简单实现一个JavaScript运动的框架。主要包括：
1. 速度动画（改变left、right、width、height、opacity）
2. 缓冲运动
3. 多物体运动
4. 任意属性值改变
5. 链式运动
6. 多属性同时变化

速度动画

速度动画就是通过改变left、right、width、height、opacity的值来达到动画效果。我们先写一个简单的HTML结构：

<div id="div1">
    <span id="share">分享</span>
</div>

具体CSS样式效果如下图：

这里，我用CSS将div的left值设置为-200px,使其移除浏览器窗口：

具体CSS参考如下：

body {
    font-family: "SF UI Text", serif, sans-serif;
    font-size: 12px;
}
* {
    margin: 0;
    padding: 0;
}
#div1 {
    width: 200px;