首页 > 代码库 > css3 动画效果与公司框架简易动画的差异

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

先看一下该网站的效果

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

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

一、特点与差异、

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

像这样

<img src="http://www.mamicode.com/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。

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