css动画简易模式

css在做web前端的开发过程中经常用到，尤其是在jquery-ajax框架中很常用,其中的css动画在框架中的style文件中占有很大比重

http://www.w3school.com.cn/css3/css3_animation.asp

原装版可以在以上的网址中学到，我这里说的是简易版

系统:win7旗舰版

编译器:VS2013

运行的浏览器:chrome、360浏览器

#scene00_02 .rensheng_css3{ 
     -webkit-animation:rensheng_css3_animate 800ms 400ms ease-out forwards; 
     left:-558px ;


}
@-webkit-keyframes rensheng_css3_animate{
0%{left:-558px} 
100%{left:41px}
}

以上是在工作中项目的一个样式的代码，以此为例开讲：

#scene00_02  .rensheng_css3

表示id="scene00_02"中class="resheng_css3"表示的元素，是动画的对象，学过jquery的应该都知道

 -webkit-animation:rensheng_css3_animate 800ms 400ms ease-out forwards; 

全部属性应该为:

-webkit-animation:动画名称  周期  速度曲线  延迟  播放次数  是否逆向播放   状态  周期外状态

动画名称：规定@-webkit-keyframes动画的名称,名称不能和后面属性的属性值同名

周期：动画播放一次所花费的时间,单位为秒(s)或毫秒(ms)

速度曲线：动画怎么跑，匀速(线型)、忽快忽慢(非线型)，属性值:linear、ease、ease-out、ease-in、ease-in-out，告诉你们linear是线型，其他自己摸索去吧

（速度曲线摸索的地址   http://www.w3school.com.cn/tiy/t.asp?f=css3_animation-timing-function2）

延迟：等多长时间开始动画,单位和参照周期

播放次数：会汉语都知道，另外，infinite表示无限次

是否逆向播放:就是问是否要来个时间倒流，默认不倒流(normal),想要倒流属性设置为alternate

状态：动画运行的状态，running 或者 pause ，默认为ruuing，而且个人感觉pause没啥用

周期外状态：就是动画运行前的延迟期以及动画结束后保持的状态，一般both就够用了,属性值有:none | forwards |  backwards | both

none:运行完自动回到运行前状态

forwards:运行后保持动画结束时的状态

backwards:运行前的延迟期保持动画的初始状态

both=forwards+backwards

注意：-webkit-animation除了名称和周期外都是可选属性，而且属性没有固定的顺序，只要记住名称和属性名不能一样；且如果如果有两个时间值，前面的一定为周期，后面的一定为延迟，其他属于未发现

@-webkit-keyframes rensheng_css3_animate{
0%{left:-558px} 
100%{left:41px}
}

@-webkit-keyframes  规定动画，后面绑定动画名称，要和属性列表的名称一致

0%{动画起始属性值}

....{中间属性，自己定}

100%{动画结束时的属性值}

大家有时候会看到from  to ,起始就是指的0%和100%