css3的动画支持大多数浏览器，但最好还是加-webkit-animation等属性，
IE9以及以前的版本并不支持。
animation属性是一个简写属性，用于设置动画的属性;
animation-name 动画名称(自己取的名称)
animation-duration 规定动画完成一次周期所花费的时间，默认是0.
animation-timing-function 动画的速度曲线，默认是"ease"(其他常用值：ease-in，加速；ease-out，减速；ease-in-out,加速然后减速)
animation-delay 动画何时开始，默认0.（如1秒就是'1s',0.5秒就是0.5s或者.5s）
animation-iteration-count 动画迭代计数,默认1(动画的重复次数，设infinite为无数次)
animation-direction 规定动画是否在下一期逆向地播放.默认不逆向“normal”(逆向alternate)
animation-play-state 规定动画是否正在运行或暂停，默认是“running”
animation-fill-mode 规定对象动画时间之外的状态。
animation: a .5s forwards; animation:缩写 a 动画名字 .5s动画时间 forwards动画在完成后保留最后一个动画
要记得添加动画宽高,可以使用图片与相对定位，绝对定位。
动画还需要一个关键帧来控制，需要重新用一个css3规定动画属性编写
例如animation-mymove那么后面名字就是用来连接帧的
@keyframes mymove前面的@就是用来声明属性，后面mymove即可连接在一起。
前面都是属性，它默认的属性值为none，0并且无继承行的。
@keyframes mymove{
from{background:red;}
to{background:yellow}
}
@keyframes mymove属性，它的属性值里面有几种方法。
这里from是开始，它的属性值是红色。
to是结束，它的属性值是黄色，
animation-duration,设置了时间。记得设置宽高才看得见效果
然后会发现它会从红到黄产生一个动画。
什么是css3中的动画？
动画是使元素从一种样式逐渐变化为另一个样式的效果。
您可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%。
0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。
@keyframes mymove{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
以上只是改变了背景色，如需改变位置的话如下:
@keyframes mymove{
0%{background:red; left:0px; top:0px;}
25%{background:yellow;left:200px; top:0px;}
50%{background:blue; left:200px; top:200px}
75%{background:red; left:0px; top:200px;}
100%{background:green;left:0px; top:0px;}
}
0%的时候背景是红色，位置保持不变。
25%的时候背景是黄色，离左200px，上为0.
50%的时候背景是蓝色，离左200px,离上200px.
75%的时候背景是红色，左为0,离上200px.
100%的时候背景绿色， 左为0,上为0.回到了原点了。
transition属性是一个简写属性用于设置4个动画过渡属性。
transition-property:设置那些属性进行过渡/分别有（width:，height:，border-radius:;）列表以逗号隔开
transition-duration:完成过渡动画的效果时间，默认是0
transition-timing-function:设置动画的缓动效果，默认是ease（逐渐变慢）。
（其他常用值：ease-in，加速；ease-out，减速；ease-in-out,加速然后减速。）
transition-delay:设置动画开始的延迟时间，默认是0；
缩写是:transition:all 1s ease-in 1s; all指的是全部的宽高等属性
transition的功能，使css的属性值在一定的时间内平滑地过渡。这种效果可以在鼠标点击、
划过、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变css属性值。
变形transform
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行:旋转、缩放、移动、倾斜。
transform参数:
rotate(角度值)：旋转 (可用正负极为数字单位deg)
translate(x,y):移动 (如只需要移动一个轴为设置translateX(设置为大写X,Y,Z)X,Y为2D转换。
Z为3D转换，需要3D转换设置为translate3d(正负数都可以);
transform-style:preserve-3d;父级元素声明为3d视图;
scale(x,y):缩放 (scale(1.5)x轴与y轴同时放大1.5倍. scale(1,0.5)x轴不变,y轴缩放0.5倍）
skew(x,y):扭曲 (如只需要一个轴扭曲倾斜skewX,skewY只沿着X,Y轴角进行扭曲)
matrix(a,b,c,d,e,f):矩阵把所有的2d转换方法结合在一起，需要6个参数，包含数学函数，允许我们旋转，缩放，移动，以及扭曲。（2D转换有6个值的矩阵，3D则有16个值的4X4矩阵）
例如translate:matrix(0.866,0.5,-0.5,0.866,0,0)
perspective:为3d转换元素定义透视视图。
改变元素基点transform-origin:x,y;它的作用是改变transform动作的基点（中心点）,
如需要改变单一的轴数 transform-origin:x-axis(单位为left,center,right,length,%)
y轴也是一样的写法，但z轴的单位只有length
box-shadow对象阴影
一语法：{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor
语法:box-shadow:投影方式(inset) x轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色
可以使用一个或多个投影，如果使用多个投影时必须要用逗号，分开。
另外，还可以通过inset来设置对象的内阴影。不设置inset就是默认的外阴影。
text-shadow是给文本添加阴影效果。box-shadow是给元素添加阴影效果。
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
