css动画

（声明：文中部分内容系整理别人的，出处--http://www.w3cplus.com/css3/new-css3-linear-gradient.html）

一、Css3 Gradient

  Gradient分为linear-    gradient（渐行渐变）和radial-gradient（径向渐变）。因为浏览器的支持性不同所以有必要来了解一下现在的几种主流的浏览器内核：Mozilla（-moz-）（Firefox，Flock等浏览器）、WebKit(-webkit-)（Safari、Chrome等浏览器）、Opera(-o-)（Opera浏览器）、Trident(-ms-)（IE浏览器），解释一下“(-中间-)”是对特定浏览器的一个滤镜识别，使用不同的渲染，所以不同的浏览器对于相同的代码可能会出现不同的结果。

   线性渐变：

   W3C组织将渐变设计收入到CSS3标准中，让广大的前端设计师直接受益，可以直接通过CSS3的渐变属性制作类似渐变图片的效果。而且渐变属性慢慢得到了众多现代浏览器的兼容，甚至烦人的IE，在IE10版本也支持了这个属性。

   渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url() 值的地方采用，比如最常见的background-p_w_picpath、list-style-type以及前面介绍的CSS3的图像边框属性border-p_w_picpath。但直到目前为止，仅在背景图片中得到最完美的支持。              

   最早支持CSS3渐变的是Webkit内核的浏览，随后在Firefox和Opera等浏览器都得到支持，但是众浏览器之间没有得到统一的标准，用法差异很大。不同的渲染引擎实现渐变的语法也不同，各浏览器下使用都需要带上自己的前缀，给前端设计师们带来极大的不便。不过还好，到写本章内容的时候，CSS3渐变属性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器已完全支持W3C的标准语法，但在Webkit内核下的Safari、iOS Safari、Android浏览器和Blackberry浏览器中还是需要添加浏览器的前缀 “-webkit-”。较以前相比，虽然CSS3的渐变属性在众浏览器中得到较好的支持，但在实际使用的时候也像制作软件（Photoshop CS6、Firework CS6等）的渐变工具一样，将渐变分成了几种：线性渐变，径向渐变、重复线性渐变和重复径向渐变。接下来，我们将依次介绍它们.

线性渐变：语法：

linear-gradient([[ | to ],]?[,]+)

    W3C标准线性渐性语法包括三个主要属性参数：第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为“to bottom”。在决定渐变的方向主要有两种方法：

•      ：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转。

•      关键词：通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外，还可以使用“top left”左上角到右下角、“top right”左上角到右下解等。

•      第二个和第三个参数，表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。

• 直接上例子：

• .toLeft {  background-p_w_picpath:-webkit-linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    background-p_w_picpath:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);}.toRight {  background-p_w_picpath:-webkit-linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
    background-p_w_picpath:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);}.toTop {  background-p_w_picpath:-webkit-linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);
    background-p_w_picpath:linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);}.toBottom {  background-p_w_picpath:-webkit-linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet);
    background-p_w_picpath:linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet);}

效果如下图所示：

还可以这样：

.toLeft {  background-p_w_picpath:-webkit-linear-gradient(
    to left, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%); 
  background-p_w_picpath:linear-gradient(
    to left, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%); 
  }.toRight {  background-p_w_picpath:-webkit-linear-gradient(
    to right, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%);
  background-p_w_picpath: linear-gradient(
    to right, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%);}

效果如下图所示：

 径向渐变：

    CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。  

    CSS3径向渐变在Webkit引擎下的语法和线性渐变的语法一样，分为两种，一种是老版本的语法，另外一种是新版本语法：

Webkit引擎下的老版本语法：

-webkit-gradient([],[ || ,]?[ ||,]?,[,]*);	

Webkit引擎新式语法

-webkit-radial-gradient([ || ,]?[ || ,]?,[,]*);	

Webkit引擎中的浏览器Chrome4－9和Safari 4－5版本支持老式的Webkit引擎径向语法，Chrome10.0+和Safari5.1+支持Webkit引擎新式径向渐变。

Gecko引擎的CSS3的径向渐变语法：

Gecko引擎的CSS3的径向渐变和Webkit引擎新式语法类似，只是使用的前缀不同而以：

-moz-radial-gradient([ || ,]?[ || ,]?,[,]*);

Gecko引擎的Firefox浏览器中Firefox3.6+版本支持径向渐变。

Presto引擎的CSS3径向渐变语法

Presto引擎的CSS3径向渐变语法和Webkit引擎的新式语法类似，只是使用的前缀不同而以：

-o-radial-gradient([ || ,]?[ || ,]?,[,]*);

Presto引擎中的Opear11.6开始支持径向渐变。

Trident引擎的浏览器的径向渐变语法：

Trident引擎的浏览器从IE10开始支持径向渐变语法，其语法格式与Webkit引擎的新式语法类似，仅不同的是其前缀不同，需要使用“-ms-”：

-ms-radial-gradient([ || ,]?[ || ,]?,[,]*);

W3标准：

W3C组织从2013年04月开始给径向语法推出新的语法规则：

radial-gradient([[ || ] [at ]?,| at ,]?[,]+);	

不过支持径向渐变语法的浏览器，到写这文稿时，仅有IE10+,Firefox16+浏览器支持。

参数：

CSS3的径向渐变相对于线性渐变要复杂的多，属性参数也繁多复杂。CSS3径向变中新老语法中的属性参数定义如下：

：主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。其值主要有以下几种：

•  ：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。

•  ：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。

•  left：设置左边为径向渐变圆心的横坐标值。

•  center：设置中间为径向渐变圆心的横坐标值或纵坐标。

•  right：设置右边为径向渐变圆心的横坐标值。

•  top：设置顶部为径向渐变圆心的纵标值。

•  bottom：设置底部为径向渐变圆心的纵标值。

：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”：

•  circle：如果和大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变

•  ellipse：如果和大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：

•  closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；

•  closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；

•  farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；

•  farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

如果设置了为“circle”或者省略，可能显式设置为。表示的是用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。

如果设置了“ellipse”或者省略，可能显式设置为［|］。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用定义大小之外还可以使用来定义这两半径大小。使用定义值是相对于径向渐变容器的尺寸。同样不能为负值。

：径向渐变线上的停止颜色，类似于线性渐变的。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

        上例子：

            用不同的渐变参数制作径向渐变效果，通过制作同心圆，主要半径和次要半径来决定径向渐变的形状。例如，圆心位置都在“200px,150px”处，主要半径为50px，次要半径为150px，从“hsla(120,70%,60%,.9)”色到“hsla(360,60%,60%,.9)”色径向渐变：

div {	width: 400px;
	height: 300px;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-p_w_picpath: -webkit-radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
	background-p_w_picpath: radial-gradient(50px 150px at 200px  150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));}	

效果如下图所示：

上图实现的是内径小于外径制作的径向渐变效果，接着我们来看看圆心相同，内外半径大小相同实现的渐变效果：

div {	width: 400px;
	height: 300px;
	margin: 50px auto;
	border: 5px solid hsla(60,50%,80%,.8);
	background-p_w_picpath: -webkit-radial-gradient(200px 200px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
	background-p_w_picpath: radial-gradient(200px 200px at 200px  150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));}	

效果如下图所示：

*{
			margin: 0;
			padding: 0;
		}
		div {
			margin: 20px auto;
			width: 300px;
			height: 200px;
		}
		.circle {
			background-p_w_picpath: -wekbit-radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
			background-p_w_picpath: radial-gradient(90px circle at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
		}
		.ellipse {
			background-p_w_picpath: -wekbit-radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
			background-p_w_picpath: radial-gradient(farthest-side ellipse at top,rgb(0,0,0) 30%,rgba(255,190,90,.9) 200px,hsl(123,58%,90%) 8em,hsla(230,40%,90%,.8) 80%,blue);
		}

效果如下图所示：

二、Gradient

CSS3的变形（transform）属性让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。transform属性的基本语法如下：

transfrom:  none | <transform-function> [<transform-function>]*

transform属性可用于内联元素和块元素。其默认值为none，表示不元素不进行变形。transform另一个属性值是一系列的。表示一个或多个变形函数，以空格分开；换句话说就是我们同时对一个元素进行变形的多种属性操作，例如rotate、scale、translate等。但这里需要提醒大家，以往我们叠加效果都是用逗号(“，”)隔开，但在transform中使用多个transform-function时却需要有空格隔开。

transform属性3D变形（3D transform）模块的一部分，也就是说所有的2D变形函数也包含于3D变形规范中。如此一来，CSS3变形中的函数根据不同的规范略有不同，下面列出的是变形中的2D和3D常用变形函数的功能，简单说明如下：

2D transform常用的transform-function的功能:

•  translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。

•  scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。

•  rotate()：用来旋转元素。

•  skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。

•  matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

•  translate3d()：移元素元素，用来指定一个3D变形移动位移量

•  translate()：指定3Ｄ位移在Ｚ轴的位移量。

•  scale3d()：用来缩放一个元素。

•  scaleZ():指定Z轴的缩放向量。

•  rotate3d()：指定元素具有一个三维旋转的角度。

•  rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。

•  perspective()：指定一个透视投影矩阵。

•  matrix3d()：定义矩阵变形。

transform-origin:

    

transform-origin取值与background-position取值类似。为了方便记忆，可以把关键词和百分比值对比起来记：

•  top = top center = center top = 50% 0

•  right = right center = center right = 100%或(100% 50%)

•  bottom = bottom center = center bottom = 50% 100%

•  left = left center = center left = 0或(0 50%)

•  center = center center = 50%或（50% 50%）

•  top left = left top = 0 0

•  right top = top right = 100% 0

•  bottom right = right bottom = 100% 100%

•  bottom left = left bottom = 0 100%

下面就看一个例子，深切的理解下面几个属性：（scale，skew，rotate）

.div {    width: 500px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    background: url(p_w_picpaths/bg-grid.jpg) no-repeat center center;
    background-size: 100% 100%;}div img {    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -71px;
    margin-top: -100px; }

.div img:nth-child(1){    opacity: .5;
    z-index: 1;
    transform: rotate(10deg);}div img:nth-child(2){    opacity: .6;
    z-index: 2;
    transform: rotate(25deg);}div img:nth-child(3){    opacity: .7;
    z-index: 3;
    transform: rotate(35deg);}div img:nth-child(4){    opacity: .8;
    z-index: 4;
    transform: rotate(45deg);}div img:nth-child(5){    z-index: 5;
    transform: rotate(60deg);}div:nth-of-type(2) img {    transform-origin: bottom;}

div img:nth-child(1){    opacity: .5;
    z-index: 1;
    transform: skewX(10deg);}
    div img:nth-child(2){    opacity: .6;
    z-index: 2;
    transform: skewX(15deg);}div img:nth-child(3){    opacity: .7;
    z-index: 3;
    transform: skewX(20deg);}div img:nth-child(4){    opacity: .8;
    z-index: 4;
    transform: skewX(25deg);}div img:nth-child(5){    z-index: 5;
    transform: skewX(30deg);}div:nth-of-type(2) img {    transform-origin: bottom;}

div img:nth-child(1){    opacity: .5;
    z-index: 1;
    transform: scale(1.2);}div img:nth-child(2){    opacity: .6;
    z-index: 2;
    transform: scale(1.1);}div img:nth-child(3){    opacity: .7;
    z-index: 3;
    transform: scale(.9);}div img:nth-child(4){    opacity: .8;
    z-index: 4;
    transform: scale(.8);}div img:nth-child(5){    z-index: 5;
    transform: scale(.6);}div:nth-of-type(2) img {    transform-origin: right;}

在scale()函数中，取值除了可以取正值之外，同时还可以取负值。只不过取负值时，会先让元素进行翻转，然后在进行缩放。

div img {    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -71px;
    margin-top: -100px; 
    backface-visibility: visible;
    transform: perspective(500px);}div img:nth-child(1){    opacity: .5;
    z-index: 1;
    transform: rotate3d(1, 1, 1,10deg);}div img:nth-child(2){    opacity: .6;
    z-index: 2;
    transform: rotate3d(1, 1, 1,25deg);}div img:nth-child(3){    opacity: .7;
    z-index: 3;
    transform: rotate3d(1, 1, 1,35deg);}div img:nth-child(4){    opacity: .8;
    z-index: 4;
    transform: rotate3d(1, 1, 1,45deg);}div img:nth-child(5){    z-index: 5;
    transform: rotate3d(1, 1, 1,60deg);}div:nth-of-type(2) img {    transform-origin: left bottom -50px;}

  

下面来讲一下位移函数（translate）：

translate是一种方法，将元素向指定的方向移动，类似于position中的relative。可以简单的理解为，使用translate()函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。

translate()函数的使用语法如下：

        translate(tx),或者translate(tx,ty)

•  tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。

•  ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。

结合起来，translate()函数移动元素主要有以下三种移动：

•  水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；

•  垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);

•  对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

 

div {
    width: 500px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    background: url(p_w_picpaths/bg-grid.jpg) no-repeat center center;
    background-size: 100% 100%;}

//默认图片都在容器中水平垂直居中
div img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -50px; 
}
div img:nth-child(1){
    opacity: .5;
    z-index: 1;
}
div img:nth-child(2){
    opacity: 1;
    z-index: 2;
    transform: translate(100px,0);
}

 

效果如下图所示：

• 上面讲的是2d，下面讲一下3d：

•    在讲3d之前，先了解一下一个属性：perspective

• （转载：http://www.alixixi.com/web/a/2013011686696.shtml）

• CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。

• 只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单：

• 只能选择透视方式，也就是近大远小的显示方式。

• 镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。

• 可以调整镜头与平面位置：

• a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

• b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。

• 下面用一个正方体（或者说骰子）向大家演示视角不同视角（perspective 以及 ）的差别。

• 镜头距离z=0平面的不同距离的效果。

• 

• 镜头在z坐标固定时，x和y坐标（perspective-origin）变化时的差别。

• 

• 使用CSS3进行3D变换很简单。

• 例如：让一个Div沿Y轴旋转一个角度：

• 上面的原始的Div和图片，下面是旋转后的效果。

    

第一张图是原始状态的DIV，第二张图是旋转后的效果。

是不是效果不明显？这是因为镜头离平面太远了，所以旋转效果不明显。现在我们试试perspective属性。我们设置perspect=400px。

怎么样现在效果明显了吧。这就是perspective的用途。

不过在chrome中发现一个问题，那就是perspective一定要在rotateY（或rotateX）的前面。如果代码写成下面的情况，perspective的设置会无效。

在FireFox中也是这种情况。

在mozilla的文档上也没有说明这个情况。现在还不确定是设计如此还是Bug。总之大家用的时候就将prespective放在前面好了。

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。其基本语法如下：

translate3d(tx,ty,tz)

其属性值取值说明如下：

 tx：代表横向坐标位移向量的长度；

 ty：代表纵向坐标位移向量的长度；

 tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

现在看一个实例：