不要再吹水地球人听不懂的技术，咱来点干货!--中文前端UI框架Kit（五）支持Css全属性的Javascript动画，抛弃jQuery，Mootools吧，与他

本周原本要接着KitJs的高级事件继续写下去的，不过鼠标手势还有一些技术问题需要解决，暂不放出。本周我们先来说说KitJs的Animation这个类。

demo地址：http://xueduany.github.com/KitJs/KitJs/demo/Animation/demo.html

KitJs官网：http://xueduany.github.com/KitJs

DOC地址：http://xueduany.github.com/jsdoc/out/$Kit.Animation.html

源代码：https://github.com/xueduany/KitJs

（一）为什么要单独搞一个animation类？

说实话，我用了mooltools，也用了jQuery等很多Css动画类，但是感觉用的不爽，太复杂，主要集中在一下方面

1. 动画效果的timeout基本是针对单个dom node，内部实现也就是一个interval控制一个节点。

2. 动画串联方式不自由，基本上，他会让你把一些需要实现的动画，放在一个什么队列，然后依次执行，要想在队列中间阻塞火车插入一段匿名方法不太方便

3. 不支持Css3属性，比如-webkit-tranform，3D旋转等等

*4. 有的类库居然还不支持颜色渐变。。。这么简单的东西。。。

（二）KitJs Animation的优点

1. 多node，一起动，无需设置起点状态，只需要设置终点状态，即可实现，兄弟们从四面八风冲一点集中的效果。

2. 动画串联非常方便，直接通过匿名函数链的方式，链接任意匿名函数，随便你做什么都行

3. 支持Css3属性，支持-webkit-transform，支持3D旋转，支持颜色渐变

4. 支持滚动条scrollTop,scrollLeft

（三）Demo

先来点干货，我们要实现一个动画，一般需要设置的参数有

el : ".test1"? 什么node需要变化，直接传递一个Css3 Selector神马是最方便的了

duration: 300 动画持续时间

要变成一个什么样子，传递一个json对象是最合适的了

to : {
??????????????????????????? 'background-color' : 'rgba(255,255,255,0.5)',
??????????????????????????? 'color' : '#000000',
??????????????????????????? '-webkit-transform' : 'translateY(100px) translateX(100px) scale(1)'
??????????????????????? }