css3 transform动画效果与公司框架简易动画的差异

先看一下该网站的效果

http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/

该站里面的动画效果由简易动画与css3动画2种方式混合达到的。

一、特点与差异、

1.简易动画直接通过对dom元素追加class类名与属性参数

像这样

<img src="data:images/page02/text01.png"  class="text01 cmn-animate" cfg="{action:[{styles:{'opacity':'0'},speed:200},{styles:{'opacity':'1'},speed:1600}],loop:0,index:1}" />

实现原理：是对jQuery的animate动画的改写，以达到控制元素的css样式实现动画效果。

2.css3动画(这个参考一下代码)

实现原理：主要是通过css关键帧在不同时间段对样式属性的变化控制实现动画效果。

3.transform做 css3动画效果，页面切版做好以后直接加上去即可（因为已经设置定位了），不用改变以前的位置属性已经最终的位置属性。

以首页的车子从页面外面飞到页面里面为例:

如果适用简易动画，要首先把车子的left属性设置为left：-200px;然后再通过在一定的时间内把left设置为0，让其进入页面内。我们在切版的时候就是设置了left：0；

现在为了添加动画效果，需要在样式表里面把车子初始值left设置为-2000px,最后再设置后来为0，已达到简单的飞入动画效果。

如果是通过css3的transform 做出的动画效果，从我们切版的角度是不会影响到原来元素位置的最终属性值（position:absolute;left:xxpx;top:xxpx;）。

简易动画的位置变化效果是时刻在改变元素的位置属性值

简易动画的动画效果添加相对略微麻烦一点。因为起始位置属性要改变，最终位置属性值才是页面切版后的位置属性值。

4.适用性：简易动画适用与PC端移动端都可以。css3动画则不兼容IE7，8。