css3为我们提供了强大的动画功能，我们可以借助改变其他css属性；css3除了借助最常用css属性，要想实现更加漂亮的动画，结合css3的变换属性必可不少。
介绍css3的动画之前：
transform 变换等
transition 过渡等
setTimeout 一次延时函数等
我们先做学习了解！！！
一、css3动画-热身了解
第一大部分的介绍都是api的展示和解释，我们下面的学习中，就是在用这部分api做处理：
1.transform 变换
2D处理
transform CSS3 无 检索或设置对象的变换
transform-origin CSS3 无 检索或设置对象中的变换所参照的原点
取值
none： 无转换
matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX()： 指定对象X轴（水平方向）的平移
translateY()： 指定对象Y轴（垂直方向）的平移
rotate()： 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX()： 指定对象X轴的（水平方向）缩放
scaleY()： 指定对象Y轴的（垂直方向）缩放
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX()： 指定对象X轴的（水平方向）扭曲
skewY()： 指定对象Y轴的（垂直方向）扭曲
3D处理
transform-style: preserve-3d;
取值
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
3D相关属性
transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值
perspective 透视距离，人眼到元素标签的距离，单位px，3d真实效果就具有近大远小
perspective-origin 透视原点
backface-visibility:hidden; 背面面对屏幕是否可见，元素3d旋转后背面对人眼和屏幕
2.transition 过渡
transition CSS3 无 复合属性。检索或设置对象变换时的过渡效果
transition-property CSS3 无 检索或设置对象中的参与过渡的属性
transition-duration CSS3 无 检索或设置对象过渡的持续时间
transition-timing-function CSS3 无 检索或设置对象中过渡的类型
transition-delay CSS3 无 检索或设置对象延迟过渡的时间
3.animation 动画
animation CSS3 无 复合属性。检索或设置对象所应用的动画特效
animation-name CSS3 无 检索或设置对象所应用的动画名称
animation-duration CSS3 无 检索或设置对象动画的持续时间
animation-timing-function CSS3 无 检索或设置对象动画的过渡类型
animation-delay CSS3 无 检索或设置对象动画延迟的时间
animation-iteration-count CSS3 无 检索或设置对象动画的循环次数
animation-direction CSS3 无 检索或设置对象动画在循环中是否反向运动
animation-play-state CSS3 无 检索或设置对象动画的状态
animation-fill-mode CSS3 无 检索或设置对象动画时间之外的状态
@keyframes animations{
0%{-webkit-transform:translate(0);opacity:0;}
50%{-webkit-transform:translate(30px);opacity:1;}
70%{-webkit-transform:translate(35px);opacity:1;}
100%{-webkit-transform:translate(60px);opacity:0;}
}
setTimeout 一次延时函数
setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
clearTimeout(id);
id是由setTimeout返回的id值
setInterval 间隔延时函数
setInterval(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
clearInterval(id);
id是由setInterval返回的id值
requestAnimationFrame 据浏览器自己的频率进行执行
requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API，目前已在多个浏览器得到了支持，
包括IE10+，Firefox，Chrome，Safari，Opera等，在移动设备上，ios6以上版本以及IE mobi
le 10以上也支持requestAnimationFrame，唯一比较遗憾的是目前安卓上的原生浏览器并不支
持requestAnimationFrame，不过对requestAnimationFrame的支持应该是大势所趋了，
安卓版本的chrome 16+也是支持requestAnimationFrame的。
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，
并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，
这当然就意味着更少的的cpu，gpu和内存使用量。
像setTimeout、setInterval一样，requestAnimationFrame是一个全局函
数。调用requestAnimationFrame后，它会要求浏览器根据自己的频率进行
一次重绘，它接收一个回调函数作为参数，在即将开始的浏览器重绘时，
会调用这个函数，并会给这个函数传入调用回调函数时的时间作为参数。
由于requestAnimationFrame的功效只是一次性的，所以若想达到动画
效果，则必须连续不断的调用requestAnimationFrame，就像
我们使用setTimeout来实现动画所做的那样。requestAnimationFrame函
数会返回一个资源标识符，可以把它作为参数传入cancelAnimationFrame函
数来取消requestAnimationFrame的回调。
二、css3动画-各个属性方法分析
这部分需要实例的演示结合解释，大家下载项目包，我把解释都注释在效果上面，大家看html页面就可。
http://www.oschina.net/code/snippet_2352644_50362
大家应该理解css的认识必须属性直接结合实例，但是博客不具有这个功能，也许我没发现吧！我们要了解的都写在1-6的html页面里了，大家对应看具体的页面就好了。
当前目录学习页面：2-css3动画-各个属性方法分析.html
三、css3动画-实例实现
下载地址还是上面的：http://www.oschina.net/code/snippet_2352644_50362
当前目录学习页面：3-css3动画-实例实现.html
四、css3动画-完整实例实现
当前目录学习页面：4-css3动画-完整实例实现.html
五、css3动画-小小实例
当前目录学习页面：5-css3动画-小小实例.html
（其中滚动监听引导线效果是自己写的！！！其他小实例是下载的，我必须说明，不过地址忘了，小实例属于转载！！！）
六、css3过渡
当前目录学习页面：6-css3过渡.html
（最后的不是动画，是过渡效果的使用结合jq，不要受第五部分影响，这也是自创！！！）
动画实例下载地址：
http://www.oschina.net/code/snippet_2352644_50362