css3动画

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下表现为黑色（已验证），建议不要省略此参数。