CSS动画Demo
css3中提供了transform和transistion来实现简单的动画，但是包括IE9都没有提供支持，其他最新浏览器都以实现，做这个纯属周末打发时间，还是记录下来，以便以后查看。
基本语法
transform的理解就是变形，主要的参数有（旋转rotate，扭曲skew,缩放scale和移动translate以及矩阵变形matrix）
rotate（角度）角度可以为正数（顺时针）、负数（逆时针）
1 -webkit-transform:rotate(0deg); 2 -moz-transform:rotate(0deg); 3 -o-transform:rotate(0deg);
skew（扭曲）
1 -webkit-transform:skew(20deg,-30deg); //skew(相对于x轴倾斜,相对于Y轴倾斜) 2 -moz-transform:skew(20deg,-30deg); 3 -o-transform:skew(20deg,-30deg);
scale（缩放） 它的两个参数分别控制宽缩放和高缩放，只有一个参数是表示两个缩放相同
-webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1);
translate（位移）可以用来水平或者垂直方向平移
-webkit-transform:translate(20px,20px); -moz-transform:translate(20px,-20px); -o-transform:translate(20px,-20px);
接下来是transition
transition主要是用来在某个时段对css属性进行平滑控制，transition属性包括四个值property，duration，timing-function,delay
transition-property主要是针对当前选择器的某一个属性进行设置，比如我要过度背景颜色那么property的值就是background.
transition-duration:是过度效果的持续时间，单位为秒（s）,它可以作用于任何元素，包括:before和:after伪类元素。
transtion-timing-function:ease 逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out:由快到慢；ease-in-out:由慢到快再到慢。
综合写法
1 -webkit-transition:all 1s ease-in-out; 2 -moz-transition:all 1s ease-in-out; 3 -o-transition:all 1s ease-in-out; 4 transition:all 1s ease-in-out;
animation只应用在页面上已存在的DOM元素上，适合做简单的动画。
动画时长：animation-duration指定动画播放的时长，取值为数值，单位为s，
动画执行方式：animation-timing-function ease：逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：先慢到快再到慢。
动画延迟：animation-dalay:指定动画的开始时间，单位为s。
动画循环次数：animation-iteration-count指定元素播放动画的循环次数，其可以取值<number>为数字，默认值为“1”；infinite为无限次数循环。
动画播放方向：animation-direction 默认值为normal，如设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，动画播放在第偶数次向前播放，第奇数次向反方向播放。
动画播放状态：animation-play-state 其中running为默认值，作用与音乐播放器相同，通过paused停止动画，也可通过running将动画开始播放。
Keyframes 类似于flash的关键帧，由”@keyframes”开头，后面紧接着是 “动画的名称”加上一对花括号“{}”，括号中是不同时间段样式规则，与css的样式写法相同。样式的构成，如“0%”到”100%”之间，我们可以在这个规则中创建任意个百分比，分别给每个百分比中设置动画效果属性，让元素实现不断变化的效果。
最后附上css3浏览器支持情况
