-css3高级技术(p)

layout: post
title: “CSS3高级技术”
categories: css
tags: css3
excerpt: 这篇文章是写一些css3常用的高级特性的，很好用

对于这些css3属性，在用百分数设置值的时候，都是相对于元素自身的宽高设置的

一、box-shadow(是给元素块添加周边阴影效果影)投影

box-shadow的原理是：在元素的原位置模一个和原元素一样大的阴影，然后再为这个阴影设置其他一些东西。

(1)浏览器支持: IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1

(2)语法：

box-shadow: x-shadow y-shadow blur spread color inset;

x-shadow	必需。水平偏移值。允许负值。	
y-shadow	必需。垂直偏移值。允许负值。	
blur(模糊)	可选。模糊距离。这个值实际上是指，阴影的发散距离，即从阴影有颜色到变成透明的距离。	
spread(范围)	可选。阴影尺寸。这个值实际上是加宽阴影的宽度，如果
                      已经设置border-radius,那么展现出来的阴影也将是圆角效果。
                      即，这个值的实际意思是，元素阴影向各个方向外拓展这个值的长度之后，再开始模糊
color	可选。阴影的颜色。请参阅 CSS 颜色值，可以用rgba，但是不能用gradient
inset	可选。将外部阴影 (outset默认) 改为内部阴影

(3)x-shadow和y-shadow: x-shadow和y-shadow的值，实质上就相当于设置了相对定位之后的top和left的值一样，是把整块元素的阴影相对与以前元素移动。

实例：box-shadow: 10px 10px 5px red；

(4)blur: 这个值实际上是在上下左右各加一半的长度。比如设置为10px；则在上面是5px的阴影，下面也是5px的阴影。

(5)spread：这个值可以设置为负，且一个负值可以在各个方向上缩小阴影的效果。这个值为在上下左右都加这么长的长度。比如设置为5px。就在上面阴影加5px，下面阴影也要加5px。所以，在阴影没有偏移的情况下，如果这个值设置为blur的负的一半，则完全抵消阴影。这个值即，元素阴影向各个方向外拓展这个值的长度之后，再开始模糊

(6)重要特性：叠加性。可以同时设置很多组的值在一个box-shadow上，用逗号“，”隔开。

    实例：box-shadow: 11px 8px #626262,
                      11px 9px #626262,
                      11px 10px #626262,
                      11px 11px #626262,
                      11px 12px #626262；

(7)用box-shadow实现outline圆角框效果：主要是利用了box-shadow的第三个值，和border-radius将框变弯。

    img {
    border-radius: 1px;
    box-shadow: 0 0 0 30px #cd0000;
    }

二、倒影box-reflect

这个属性是创建目标元素的一个倒影(仅仅是创建一个css效果，不占据空间尺寸，这个css效果会覆盖到其它元素的上面，和outline，box-shadow类似)。也要加上-webkit前缀才能使用。

-webkit-box-reflect: [ above | below | right | left ]? ? ?
具体来说-webkit-box-reflect最多可以由3部分组成
方位:
可以是下面4个值中的1个，above,below,left,right，分别表示上下左右。如果不是使用类似inherit等全局关键字，则此方位值是不能缺省的。
偏移大小:
倒影和原始元素偏移距离。可以是数值(可以是负数)，也可以是百分比值。如果是百分比值，则百分比大小是相对于元素自身尺寸计算的。和transform中translate的百分比计算是一致的。
遮罩图片:
对元素倒影的遮罩控制。语法类似于background-image。可以用一个渐变来控制。即，也可以给reflect出来的图形整体加上一个渐变效果，，这个值可以慢慢深究一下
-webkit-box-reflect: below 10px linear-gradient(transparent, white);

三、text-shadow(是给文本添加阴影效果)投影

(1)浏览器支持: IE9以及以下不支持

(2)语法：相比box-shadow少了一个spread属性

text-shadow: h-shadow v-shadow blur color;

x-shadow	必需。水平偏移值。允许负值。	
y-shadow	必需。垂直偏移值。允许负值。	
blur	可选。阴影模糊半径。	

color	可选。阴影的颜色。这个值可以用HSL(A)或者RGB(A)，不能用gradient

四、文字描边text-stroke

这个属性现在是firefox和edge支持。不过虽然edge不是-webkit内核，它也使用-webkit前缀。即，-webkit-text-stroke

这个属性是一个混合属性，包含text-stroke-width和text-stroke-color也就是描边的宽度和描边的颜色，只不过不能指定描边的类型，默认为实线描边，且为居中描边。

// 第一个宽度参数是必须的，第二个颜色参数如果不加的话，默认为用字体颜色填充
  -webkit-text-stroke: 2px green;

五、渐变gradient

1、简介

渐变是属于background-image的，即在background-image中设置。渐变就是多种颜色之间平滑过度

渐变在一个拥有尺寸的盒子中被生成，被称之为渐变盒，但是渐变本身并没有内在的尺寸，也就说如果在一个没有尺寸的容器上定义渐变，将无法被呈现。

可以应用在所有接受图像的属性上

渐变一共有4种linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()

2、linear-gradient

注：由于兼容性的问题，渐变有很多种写法，推荐用自动补全的工具来兼容所有浏览器

语法：第一个值为指定渐变的方向，后面的值都为色标(由颜色值和位置组成，必须颜色值在前面而位置在后面).且色标至少需要两个。

位置可以省略: 浏览器会把第一个颜色位置设置为0%，最后一个颜色位置设置为100%，所以可以省略那两个颜色值的位置

如果只设置了两种颜色，位置为n%和m%，那么浏览器会把0-n%设置为颜色1纯色，m%-100%设置为颜色2纯色，n%-m%设置为颜色1到颜色2的渐变

如果多种颜色占据同一个位置，如a、b、c三色均占据n%这一位置，则0%-n%为前一种颜色与a颜色的颜色渐变；然后是n%-n%的a颜色与c颜色的颜色突变；n%-100%是c颜色与后一种颜色的颜色渐变。所以，多种颜色占据一个位置的话，只有第一个与最后一个颜色是有用的

如果所有颜色都没有指定位置，则所有颜色均匀分部

颜色值可以用任意一种颜色模式，而位置可以用百分比和数值

linear-gradient([<起点> || <角度>,]? <点>, <点>…)
参数：
起点：从什么方向开始渐变，一般就用关键字表示比较好		默认(即不写这个参数)：为top(即从上往下)
left、top、left top
角度：从什么角度开始渐变     // 对于标准浏览器来说，0deg的时候是垂直方向，表示从下到上渐变，并且正角度表示顺时针旋转
     // 注: 对于-webkit-旧版浏览器，如windows下的safari，0deg表示从左到右，正角度表示逆时针转
点：渐变点的颜色和位置
black 50%，位置可选

// 下面这些to开始的关键字，在chrome中测试无效，windows的safari也无效
to right：
设置渐变从左到右。
to top：
设置渐变从下到上
to left：
设置渐变为从右到左。
to bottom:
设置渐变从上到下。

也可以指定两个关键字：如 background-image:linear-gradient(left top, red 100px, yellow 200px);则是从左上开始到右下。
<color-stop> 用于指定渐变的起止颜色：
<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。

如：
background: linear-gradient(180deg, gray 33.33%, blue 33.33%, blue 66.66%, green 66.66%); /* 产生一个三色条纹，具体的方位，要看浏览器 */
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)));

3、radial-gradient

语法：这个的语法和线性渐变还是差不多的，只不过可以指定渐变中心、渐变的类型、半径。

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
// 起点：可以是关键字（left,top,right,bottom），具体数值(圆心的值)或百分比(根据元素自身的宽高来计算)

// shape：渐变的类型有两种circle、ellipse(默认)，不指定类型的话默认为ellipse，起点为正中间

// size：就是设置渐变的范围大小。可以直接用长度值来指定，（当shape为circle时，半径值只用指定一个）。也可以用下面的参数
closest-side：最近端，即从设置的起点到元素的边框的边的最近距离
closest-corner：最近角，即从设置的起点到元素的边框的角的最近距离
farthest-side：最近端，即从设置的起点到元素的边框的边的最远距离
farthest-corner：最近角，即从设置的起点到元素的边框的角的最远距离

position：渐变中心坐标可以用百分比，关键字来指定。当shape为circle时，不支持百分比

如：
// 以100px 50px为起点开始渐变的椭圆,只指定了起点参数
background: radial-gradient(100px 50px,red,blue); 
// 设置形状为圆
background: -webkit-radial-gradient(100px 100px,circle,red 25%, blue 25%, blue 50%, green 75%);
// 竖直设定大小。设置椭圆的长轴半径和短轴半径都为100px，即设置为圆。但是，设置了这个具体的数值之后，就不能再设置形状了
background: -webkit-radial-gradient(100px 100px,100px 100px,red 25%, blue 25%, blue 50%, green 75%);
// 关键字设定大小。关键字只能设定一个。这个例子中，即渐变到最近的边就行了
background: -webkit-radial-gradient(100px 100px,closest-side,red 25%, blue 25%, blue 50%, green 75%);

六、border-image(增加边框的背景图片)

(1)浏览器支持: Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。
Safari 5 支持替代的 -webkit-border-image 属性。

(2)语法：实际上这个border-image和gradient结合起来应该是很好用的。这个值会无视border-raduis，依然不会出现圆角

     // 如果只加了source，没有后面的参数，则border的4个角都会出现完整的图片
     border-image: source slice width outset repeat;
     
     source	图片地址 url（）
     slice	切片。把图片切成四个角、四个边和一个中心区域，然后放到边框上面去
     width	图片边框的宽度，背景区域的图像会先根据这个值进行缩放。
     outset	图片外凸
     repeat	定义图片如何填充边框
     
     border-image:url(border.png) 27 / 6rem / 1.5rem / repeat; // 表示图片的边框宽度为67rem，outset的值设置的1.5rem
     border-image: url("/images/border.png") 30 30% 45 stretch;
     border-image: linear-gradient(red, yellow) 10 stretch repeat; // 水平方向是stretch,垂直方向是repeat

<1>source: 源地址，可以为一个图片地址，或者一个渐变

<2>slice(片): 默认单位为px(但是不能在数值后面加上那个单位，不然无法被解析)，而且可以设置百分数(百分数是相对于图片的宽高的，而不是像margin完全看宽度)。作用就是吧图片切成9宫格(四个角、四个边和一个中间块)（如果不指定fill(还是设置在slice的最后)这个可选属性，那么中间的那个为透明块）

切片方法：如：border-image-slice: 27 28 29 30; 就是在距离上面部分27px处切一刀，距离右边部分28px处切一刀，距离下面部分29px处切一刀，距离左边部分30px处切一刀。然后，形成一个九宫格且把中间的格子之外的部分放到边框对应部分去(即，角和边都是互相对应他们那部分的)。

注： slice的值和margin的值方式差不多。border-image-slice: 27 28 fill；就等于border-image-slice: 27 28 27 28 fill；

<3>width: 这个值即 图片背景占用的图片边框的宽度(和外层的border-width无关)，背景区域的图像会先根据这个属性值进行缩放，然后再重复或平铺或拉伸。使用这个值的时候需要在前面和后面都加一个/。

width可以设置的值如下：

length 带 px, em, in … 单位的尺寸值

percentage 百分比

number 不带单位的数字；它表示 border-width 的倍数

auto 使用 auto， border-image-width 将会使用 border-image-slice 的值

如果设置border-width: 3rem;border-image-width: 6rem;，则外层的边框为3rem，但是内层的图片大小是6rem，则图片会超出外层的边框，占用padding或者内容区

如果设置border-width: 6rem;border-image-width: 3rem;，则外层的边框为6rem，但是内层的图片大小是3rem，则图片只会占用外层边框的一半，剩余的一半展示为空白

<4>outset: 表示把背景图片向外侧位移指定的距离(相当于position:relative改变)。使用这个值的时候依然需要在前面和后面都加一个/

border-image-outset: 27px 28px 27px 28px；.背景图像会向上位移27px，右位移28px，下位移27px，左位移28px

<5>repeat: 用来定义图片如何填充边框，有下面四个值。可以同时指定下面的两个，第一个代表水平方向(上下)用的规则，第二个值代表垂直方向(左右)的规则

stretch(伸展，默认): 4个角和4个边分别做水平和垂直方向的拉伸

repeat(平铺)：4个边水平垂直复制图像，即ctrl+v运动；四个角依然是只会进行拉伸

round(平铺缩放): 和repeat类似，依然是四个边水平垂直复制图像，只不过当不能整数次平铺的时候，会依据情况放大或者缩小图像

space(平铺留白): 和repeat类似，依然是四个边水平垂直复制图像，只不过当不能整数次平铺的时候，会用空白间隙填充在图像周围（不会放大或缩小图像）

七、border-radius(圆角框)

注：outline-radius现在只有firefox可以使用，若要用这个效果，请看上面的box-shadow

(1)浏览器支持: IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

(2)语法：

border-radius: 1-4 length|% / 1-4 length|%;

如果只用一组值的话，那么这一组值的每一个数字即代表水平半径也代表垂直半径。
可以用**斜杠**设置第二组值。这时，第一组值表示水平半径，
第二组值表示垂直半径。第二组值也可以同时设置1到4个值，
应用规则与第一组值相同。
//百分比设置是相对于元素本身的宽高设定

如：border-radius:50px/25px; // 所有角的水平半径都为50px，垂直半径都为25px
 border-radius:25px 10px 50px 0;//左上角、右上角、右下角、左下角(顺时针顺序)
 border-radius: 50%; // 每一个角的水平半径和垂直半径都是对应边的50%
 border-radius: 50% 10px; // 左上和右下角的水平半径和垂直半径都为对应边的50%；右上和左下角的水平半径和垂直半径都为10px

(3)除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性。由于上面的属性当设置水平半径和垂直半径不一样的时候，经常出问题，所以就需要用下面这个了，分开来设置，而不是放一起设置

border-top-left-radius: 100px;

border-top-left-radius: 4.6% 7.78%; // 设置左上的角，x方向对应边的4.6%，y方向为对应编的7.78%
border-top-right-radius: 4.6% 7.78%;
border-bottom-left-radius: 4.6% 7.78%;
border-bottom-right-radius: 4.6% 7.78%;

八、css3 滤镜Filter

此处的CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。Filters主要是运用在图片上，以实现一些特效。以下为它的一些值：

grayscale灰度：使用这个特效，会把图片变成灰色的，也就是说你的图片将只有两种颜色“黑色”和“白色”。如果你在grayscale()中没有任何参数值，将会以“100%”渲染。

sepia褐色: 使用这种效果，你的图片好像很古老的一样.如果你在sepia()中没有任参数值，将会以“100％”渲染，

saturate饱和度: 用来改变图片的饱和度.默认100%。

hue-rotate色相旋转: 用来改变图片的色相.默认0deg。

invert反色: 做出来的效果就像是我们照相机底面的效果一样.默认100%。

opacity透明度: 改变不透明度。默认100%。

brightness亮度: 改变图片亮度。默认100%。

contrast对比度: 改变图片对比度。默认100%。

blur模糊: 改变清晰度。默认0.

drop-shadow阴影: 这个很像box-shadow一样的效果，给图片加阴影效果.

还可以多个滤镜一起使用

.what {
    filter: opacity(10%) blur(2px) drop-shadow(5px 5px 5px #ccc);
}

九、过渡transition

由于兼容性问题：不支持ie9以及之下。且需要加上前缀，如：-webkit-transition,-moz-transition,-o-transition。如果要在js中写这些东西，则需要去掉-且把小写变大写，如WebkitTransition

这个transition实际上和jq中的annimate差不多。transition是一个复合属性，是由四个过渡属性组成.

transiton: 运动时间 延迟时间(可选) 要运动的属性 运动形式；

transition-duration：运动时间。

transition-delay: 延迟时间。不设置的话，就所有的过渡都是触发的时候同时进行

transition-property: 要运动的属性。（all || [attr] || none）。

transition-property:all;/*针对所有元素都有过度效果，（默认）*/
transition-property:none;/*没有元素有过度效果*/
transition-property:[attr];/*指定css属性有过度效果，例如width*/

.twl2 {
  font-size: 150px;
}

.twl2:hover {
  font-size: 50px;
  border: 10px solid red;
  // 设置第二个属性为border，则表示只有border是过渡改变的，而其余属性都是直接改变
  transition: 1s border linear;
}

transition-timing-function: 运动形式.有下面5种

ease：（逐渐变慢）默认值                  ease：轻松、缓解、减轻、延缓
linear ：匀速 
ease-in：加速 
ease-out：减速 
ease-in-out：先加速再减速 
cubic-bezier：[三次贝塞尔曲线](http://matthewlein.com/ceaser/)，就是抛物线，可以用前面那个网站生成

注：单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有：
:hover :focus :checked 媒体查询触发 javascript触发

也就是说，这个渐变属性写在元素上面的时候不会马上生效，而要等到这个属性所在的元素发生了什么改变之后，这个渐变属性才发挥作用。

div {
  width: 300px;
  height: 300px;
  background: blue;
}
div:hover {
  background: red;
  // 不加下面transition的话，就是直接变为红色；加这个就延迟1s变红色
  // 这个transition也可以加在div上，效果是一样的
  // transition: 1s linear; 
  transition: all 400ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
}

叠加性：和box-shadow一样，这个transition也可以进行叠加，并且每条之后依然是通过**逗号(,)**来进行连接的

// 用(,)隔开来设置多条过渡;
// 第一条过渡是触发hover的时候直接触发，触发时间是1s
// 第二条过渡是触发hover之后，延迟3s触发，触发时间是4s
.twl2:hover{transition: 1s border ease-in,4s 3s font ease;}

transitionend事件：这个是js中的一个事件，当transition结束的时候触发。每个属性的transition结束的时候都会触发。

transition: 1s width, 1s height; // 会触发两次transitionend事件
// Webkit内核
dom.addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
dom.addEventListener("transitionend", myFunction);
function myFunction() {
    this.innerHTML = "过渡事件触发 - 过渡已完成";
    this.style.backgroundColor = "pink";
}

十、变换transform

1、2d变换

transform：可以对元素对象进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。为了兼容移动端需要加上两条样式，一条是移动端的-webkit-transform前缀，一条是普通的transform

(1)旋转 rotate()函数: 通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。平面的旋转。transform:rotate(30deg);若元素设置了perspective值，可用rotate3d()实现三维空间内旋转。

.twl2:hover {
// 再过渡的条件下变换，鼠标移入的时候，元素在3s的过渡时间内旋转360deg
  transform: rotate(360deg);
  // 同时用多个变换函数，不需要加逗号；且后写的先执行
  /*transform: rotate(360deg) scale(0.2); */
  transition: 3s ease;
}

(2)倾斜 skew()函数: 倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变
元素的形状。skew()函数不会旋转，而只会改变元素的形状。第一个参数代表元素(逆时针旋转与Y轴形成的度数)，第二个参数代表元素(顺时针旋转与X轴形成的度数)。transform:skew(30deg,10deg):还有单独的skewX()和skewY().

(3)缩放 scale() 函数: 让元素根据中心原点对对象进行缩放。 scale()的取值默认的值为1，当值设置为0.01到0.99之间时，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

transform:scale(x,y)  使元素水平方向和垂直方向同时缩放
transform:scaleX(x)  X轴缩放
transform:scaleY(x)  Y轴缩放

(4)位移 translate() 函数:translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上.用百分比设置的时候，它的百分比是相对元素自身的

transform:translate(x,y)  使元素水平方向和垂直方向同时移动
transform:translateX(x)  使元素水平方向移动
transform:translateY(y)  使元素垂直方向移动

(5)矩阵matrix: 这个矩阵是其他方法的底层实现，即这个其他方法都是通过这个方法来实现的。

// 默认是6个参数，如下
transform:matrix(1,0,0,1,0,0); // 默认矩阵
transform:matrix(a,b,c,d,e,f);

// 参数：
// 通过矩阵实现位移：即控制e，f两个参数
// x轴位移：e+disX；Y轴位移：f+disY

// 通过矩阵实现缩放：即控制a，d两个参数
// x轴缩放 a=x*a；y轴缩放 d=y*d

// 通过矩阵实现倾斜：控制b，c两个参数
// x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
// y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

// 通过矩阵实现旋转：控制a，b，c，d四个参数
// a=Math.cos(deg/180*Math.PI); 
// b=Math.sin(deg/180*Math.PI);
// c=-Math.sin(deg/180*Math.PI);
// d=Math.cos(deg/180*Math.PI);

(6)transform-origin: 这个可以设置元素的中心点。可以用百分数、关键字和数值来指定

// 百分数指定，依然是相对于元素自身的宽高百分数
transform-origin: 100% 100%; // 指的是元素右下角那个点

// 关键字：left，right，top，bottom，center.
// 用关键字的时候接收两个参数，不写的话，默认为center
transform-origin: left; // 相当于left center，即左边中间的那个点
transform-origin: left top; // 即还是默认的那个左上点

// 数值指定
transform-origin: 0 0; // 0 0 默认为左上角
// 如果元素宽度没有100px，它还是会以元素之外的那个点位源点
transform-origin: 100px 100px;

2、3d变换

3d变换与2d变换相比多了几个东西，如下：

(1)transform-style：这个属性用来建立3D空间(加在父元素上),子元素将保留其 3D 位置。

值：
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

transform-style: preserve-3d;

(2)Perspective: 设置景深(是指在摄影机镜头或其他成像器前沿能够取得清晰图像的成像所测定的被摄物体前后距离范围；可以理解为即元素距离你自己的距离)。当为元素定义 perspective 属性时，其子元素(加在父元素上)会获得透视效果，而不是元素本身。

perspective: 100px;

(3)rotateX()、rotateY()、rotateZ()、translateZ()

注1：单单设置rotateY()的话会挤成一团，所以我们需要同时用translateZ()拉开空间。

注2：为了让所有的图片无缝围城一个圆，translateZ()中的值应该为：x为图片宽度，n为图片个数，len=(x/2)/(Math.tan((1/n) * Math.PI))。

rotateX() // 沿着x轴，即上下翻转。若传入的为正值，则元素上面会向屏幕里面转动
rotateY() // 沿着y轴，即左右翻转。若传入的为正值，则元素右面会向屏幕里面转动
rotateZ() // 沿着z轴（z轴是垂直于屏幕的轴），即2d的那种转

// 这个其实是相对于Perspective的，如果设置perspective: 100px;translateZ(100px)；则就看不到元素了，因为已经把元素移动了眼睛上面
translateZ() // 正值是面向屏幕移动，负值是往屏幕更深处移动

十一、动画

CSS3的animation制作动画效果主要包括两部分：1.用关键帧(@keyframes)声明一个动画,指定一个名称。2.在animation调用关键帧声明的的动画(animation-name调用关键帧声明的动画名称)。

(1)animation-duration：是用来指定元素播放动画所持续的时间长。默认值为0，意味着动画周期为0，也就是没有任何动画效果

(2)animation-delay：在开始执行动画时需要等待的时间

(3)animation-name：指定一个动画的名称。none为默认值，将没有任何动画效果，其可以用来覆盖任何动画

-webkit-animation: 2s move;

(4)animation-timing-function：与transition-timing-function一样。指定动画的播放方式。

(5)animation-iteration-count：定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放

(6)animation-direction：默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放

(7)animation-state：默认为running，播放，paused，暂停

(8)animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。

叠加性：和box-shadow && transition一样，这个annimation也可以进行叠加，并且每条之后依然是通过**逗号(,)**来进行连接的

注：transition对于animation没有效果;也就是说对于animation的动画效果，设置transition是无效的。transition和animation是css3中实现动画的两种方式


// animation的参数和transition的参数其实是差不多的，顺序都差不多，只不过就是在最后比transition多了个播放次数
animation：动画持续时间(必需) 延迟时间(可选) 动画名称(必需) 
          播放方式(可选) 播放次数(可选)

// 关键帧的时间单位：
// 数字：0%、25%、100%等
// 字符：from(0%)、to(100%)

.animation_name{
    left:0;
    top:100px;
    position: absolute;
    -webkit-animation: 0.5s 0.5s move ease, 0.5s 5s demo ease-in  infinite alternate;
}
@-webkit-keyframes demo{ /* 关键帧必须加上webkit前缀 */
    from{left:0;}
    25%{left:100px;}
    50%{left:200px;}
    to{left:400px;}
}
@-webkit-keyframes move{
    0%{left:0;} // 不写0%，则样式默认是初始样式（写在元素中的样式）
    25%{left:100px;}
    100%{left:400px;} // 不写100%，则样式默认也是初始样式
}

十二、使用will-change开启GPU加速

硬件加速（或者说GPU加速）就是把一些处理和绘制图形的计算交给GPU来做，从而解放CPU的性能。GPU即图形处理器，是与处理和绘制图形相关的硬件

硬件加速依赖于浏览器渲染页面使用的layering model，当特定的操作（css 3D变形）作用于页面上的一个元素，元素移动到它自己的layer，在这个layer中元素合一不受页面其他元素的干扰独立渲染，然后复合到页面中去。在这种隔离内容渲染的工作方式下，如果页面的变化仅仅是该元素的变形，其余部分不必被重新渲染，这会带来显著的速度优势。值得注意的是只有3D变形会有自己的layer，2D变形不会

在Chrome中实际上有几种不同类型的层：掌管DOM子树的渲染层（RenderLayer）以及掌管渲染层子树的图形层（GraphicsLayer），某些 特殊的渲染层会被认为是合成层,而使用will-change可以把渲染层提升为合成层（Compositing Layers，合成层拥有单独的 GraphicsLayer

使用will-change把渲染层提升为合成层的优点 如下

合成层的位图，会交由 GPU 合成，比 CPU 处理要快

当自身 repaint 时，只需要 repaint 本身，不会影响到其他的层的元素。所以这里就减少了repaint

对于 3d的transform 和 opacity 效果，不会触发 layout 和 paint

will-change属性: 可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置

will-change可以写多个元素，但是不要将 will-change 应用到太多元素上。因为过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源

给它留下足够的工作时间: 即不要在元素变化的时候才加上这个属性，而要在元素还没发生变化的时候就把这个属性加上

// 下面这个操作不太好，will-change会一直挂着 很浪费性能
.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

// 下面操作很好
.will-change-parent:hover .will-change {
  will-change: transform;
  // will-change: transform, opacity; 可以写多个元素的变化
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}
但是**不要将 will-change 应用到太多元素**上。因为过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源
>   + **给它留下足够的工作时间**: 即不要在元素变化的时候 才加上这个属性，而要**在元素还没发生变化的时候就把这个属性加上**

// 下面这个操作不太好，will-change会一直挂着很浪费性能
.will-change {
will-change: transform;
transition: transform 0.3s;
}
.will-change:hover {
transform: scale(1.5);
}

// 下面操作很好
.will-change-parent:hover .will-change {
will-change: transform;
// will-change: transform, opacity; 可以写多个元素的变化
}
.will-change {
transition: transform 0.3s;
}
.will-change:hover {
transform: scale(1.5);
}