我们在js中会用到animate方法执行动画，这个家伙可是真资格的动画，完全是css一点点变化的！
而zepto则不然，使用的是HTML5/CSS3的方案，而CSS相关是不保存元素状态值的，也没办法保存，所以停止动画就成了一大问题
我们今天就一起来讨论下相关停止动画的方案，反正没有什么好的......
在现有浏览器中，一般有两种模式（我只知道两种）：
一种是js动画，他是动态改写元素的style实现动画，所以任意时间想停止动画都是没问题的，因为我们可以获得各个阶段的状态值
如何停止动画
我们先看看这个东西：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt p:/ /ww w.w 3.o rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="htt p:/ /ww w.w 3.or g/1999/xhtml">
3 <head>
4 <title></title>
5 <script id="Script2" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
6 </head>
7 <body>
8 <div id="Div2" style="background-color: Orangewidth: 100pxheight: 100pxposition: absolute
9 left: 0border: 1px solid black">
10 </div>
11 </body>
12 <script src="../zepto.js" type="text/javascript"></script>
13 <script type="text/javascript">
14 var d = $('#d')
15 d.animate({
16 left: '100px'
17 }, 10000)
18
19 setInterval(function () {
20 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft)
21 }, 1)
22
23 </script>
24 </html>
其中虽然left一开始就变了，我们惊奇的发现，offset这个家伙居然保存了我们的状态！！！
我和我的小伙伴都惊呆了，因为我之前一直以为什么状态都不能获得，于是我们为他加上mousedown事件，各位运动时候点击试试
我们这里这样干了下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt p:/ /ww w.w 3.o rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="htt p:/ /ww w.w 3 .or g/1999/xhtml">
3 <head>
4 <title></title>
5 <script id="Script3" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
6 </head>
7 <body>
8 <div id="Div3" style="background-color: Orangewidth: 100pxheight: 100pxposition: absolute
9 left: 0border: 1px solid black">
10 </div>
11 </body>
12 <script src="../zepto.js" type="text/javascript"></script>
13 <script type="text/javascript">
14 var d = $('#d')
15 d.animate({
16 left: '100px'
17 }, 10000)
18
19 setInterval(function () {
20 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft)
21 }, 1)
22
23 d.mousedown(function (e) {
24 console.log(d)
25 d.css('transition', 'left 0s linear')
26 d.css('left', d[0].offsetLeft + 'px')
27 })
28
29 </script>
30 </html>
于是我们发现，动画停止了，亲！他真的停止了！！！
PS：因为项目过程中，我这里要模仿类似iscroll的滚动效果，所以使用的最多的就是top或者translate3d(0, 0, 0)这种东西
新建keyframes元素，命名为myFirst。设置百分比，编写Animation属性对属性值的引用。为了开考虑兼容性问题，可以多写几个备选，详细步骤：
1、首先，准备好HTML前期工作以及对DIV的一个简单设置。
2、然后，新建keyframes元素，命名为myFirst。
3、然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。
4、这时候，可以为他写上各种百分比的颜色。
5、此时，就能编写Animation属性对属性值的引用。
6、为了开考虑兼容性问题，可以多写几个备选。
