捣鼓捣鼓css3动画。。。。

最近闲来无事，女朋友国庆都没空陪偶，苦逼码农只能跟代码相依为命了。。。。。

想着玩点啥好呢，琢磨着研究下css3动画。

其实css3的动画说白了也就那么回事。transform，transition，animation。

基础知识就不说了，都被别人说烂了。可以参考taobaoued的http://ued.taobao.com/blog/2010/05/css3-animation/

基础的动画知识下面给出一些介绍链接，由于已经讲得很详细了，这边就不再重复了。

1.transform

http://www.w3cplus.com/content/css3-transform

2.transition

http://www.w3cplus.com/content/css3-transition

3.animation

http://www.w3cplus.com/content/css3-animation

要想实现丰富的动画效果还是animation比较合适。

animation主要通过设置关键帧来实现，做过视频或者flsh动画的应该对动画都不陌生。

主要语法下面这个图一目了然

不过由于现在webkit内核的浏览器支持的比较好所以你得这么用,当然火狐现在好像也是支持的，前缀换成-mz就好了。

 -webkit-animation-name:'test';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 10s;/*动画持续时间*/
  -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 1s;/*动画延迟时间*/
  -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: alternate;/*定义动画方式*/

下面是个简短的例子：点击正方形，它会旋转加变色。

具体见：http://codepen.io/cherishpeace/pen/DnpKb

so easy....不过效果真简单。。。。。= =。

下面才是重头戏，其实这类动画应用性很多，一种比较不错的应用地方，我觉得就是首页的幻灯片，使用这种简单的动画，可以做出很炫的幻灯。

比如迅雷7的介绍页的幻灯：

http://dl.xunlei.com/xl7.9/intro.html 当然最好使用 chrome或沙发 这些webkit内核的浏览器来看。

效果很赞有木有。

这种幻灯实现原理其实并不难。导航的切换设为5s，然后每个banner的css3动画也是5s，切换导航时，给当前的banner对应的li标记增加动画对应的class。这样就可以达到平滑的动画过渡效果。

迅雷那边主要使用的是一个个png图片，切换banner时，开始对每个png图片执行css3动画。

我这边不想使用图片，而是希望通过一种iconfont的方式，替代这些图片。

关于什么是iconfont，可以参见这篇文章：http://www.qianduan.net/css3-icon-font-guide.html

我这边使用etao ux团队的字体库。相关地址：http://ux.etao.com/fonts

代码太多，就不贴了。效果详见 ：

http://codepen.io/cherishpeace/pen/KCjnG