css3 动画效果与公司框架简易动画的差异
先看一下该网站的效果
http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/
该站里面的动画效果由简易动画与css3动画2种方式混合达到的。
一、特点与差异、
1.简易动画直接通过对dom元素追加class类名与属性参数
像这样
<img src="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。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
