CSS3学习笔记

CSS3选择器

回顾选择器：通配符选择器、元素选择器、类选择器、ID选择器、后代选择器

新增基本选择器

子元素选择器
概念：子元素选择器只能选择某元素的子元素
语法格式：父元素 > 子元素
兼容性：IE8+、FireFox、chrome、safari、opera

相邻兄弟选择器
概念：相邻兄弟选择器可以选择紧接在另一个元素后的元素，他们有相同的父元素
语法格式：元素+兄弟相邻元素
兼容性：IE8+、FireFox、chrome、safari、opera
例子：section > div + article (选择的为div相邻的后面的article)

通用兄弟选择器
概念：选择某元素后的所有兄弟元素，他们有相同的父元素
语法格式：元素~后面所有兄弟相邻元素
兼容性：IE8+、FireFox、chrome、safari、opera

群组选择器
概念：将具有相同样式的元素分组在一起，用”,”隔开
语法格式：元素1，元素2
兼容性：IE6+、FireFox、chrome、safari、opera
例子：
section > article,
section > aside,
section > div{
相同的样式
}

属性选择器

对带有指定属性的HTML设置样式

Element [attribute]
概念：为带有attribute属性的Element元素设置样式
兼容性：IE8+、FireFox、chrome、safari、opera
例子：a[href]{}

Element [attribute=”value”]
概念：为attribute=value属性的Element元素设置样式
兼容性：IE8+、FireFox、chrome、safari、opera
例子：a[href=”#”]{}

Element [attribute~=”value”]
概念：选择attribute属性包含单词value的Element元素设置样式
(有时class有多个值）
兼容性：IE8+、FireFox、chrome、safari、opera
例子：

1
2
3

<a class="one two">
<a class="two three">
a[class="two"]

Element [attribute=^”value”]
概念：设置attribute属性值以value开头的所有Element元素的样式
兼容性：IE8+、FireFox、chrome、safari、opera

Element [attribute=$”value”]
概念：设置attribute属性值以value结尾的所有Element元素的样式
兼容性：IE8+、FireFox、chrome、safari、opera

Element [attribute=*”value”]
概念：设置attribute属性值包含value字符串的所有Element元素的样式
兼容性：IE8+、FireFox、chrome、safari、opera

Element [attribute=|”value”]
概念：设置attribute属性值以value或value-开头的所有Element元素的样式
兼容性：IE8+、FireFox、chrome、safari、opera

伪类选择器

动态伪类
这些伪类并不存在于HTML中，只有交互时才体现
锚点伪类： :link(超链接 蓝色 下划线) :visited(访问过的链接)
用户行为伪类： :hover(鼠标经过) :active(活链接) :focus(光标出现如何显示)

UI元素状态伪类

把”:enabled”(可输入) “:disabled”(不可输入) “:checked”(选中的)
兼容性：IE9+、FireFox、chrome、safari、opera(checked只有opera兼容)
例子：<input type="text" disabled="disabled"> input:disabled{}
input = input:enabled
先用input对输入框进行通用样式定义，再对:enabled :disenabled进行定义

CSS3结构类
css3的:nth选择器

选择方法

• Element:first-child
  概念：选择属于其父元素的首个子元素的每个Element元素并为其设置样式
  兼容性：IE8+、FireFox、chrome、safari、opera

• Element:last-child
  概念：指定属于其父元素的最后一个子元素的每个Element元素的样式
  兼容性：IE8+、FireFox、chrome、safari、opera

• Element:nth-child(N)
  概念：:nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素类型
  兼容性：IE9+、FireFox4+、chrome、safari、opera
  例：ul > li:nth-child(3){}
  【选择的元素与元素类型无关，只与位置有关，若取父元素的第二个子节点的div，第二个子节点不是div而是其他元素，则选择无效】
  关于N：可以用数字，表示为第X个Element元素
  可以用n.，n是简单的表达式，取值从0开始计算，不能用其他字母代替，n为全选，odd（奇数）=2n+1/-1，even（偶数）=2n
  n*n不可用，css表达式不支持 *

• Element:nth-last-child(N)
  概念：:nth-last-child(N)选择器匹配属于其父元素的第N个子元素的每个元素，不论元素类型，从最后一个子元素开始计数（从1开始计数）
  兼容性：IE9+、FireFox4+、chrome、safari、opera

• Element:nth-of-type(N)
  概念：:nth-of-type(N)选择器匹配属于其父元素的特定类型的第N个子元素的每个元素
  兼容性：IE9+、FireFox4+、chrome、safari、opera

• Element:nth-last-of-type
  概念：:nth-of-type选择器匹配属于其父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数（从1开始计数）
  兼容性：IE9+、FireFox、chrome、safari、opera

• Element:first-of-type
  概念：:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素
  兼容性：IE9+、FireFox、chrome、safari、opera

• Element:last-of-type
  概念：:last-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
  兼容性：IE9+、FireFox、chrome、safari、opera

• Element:only-child
  概念：:only-child选择器匹配属于其父元素的唯一子元素的每个元素（数量和类型都是唯一，不能有兄弟元素）
  兼容性：IE9+、FireFox、chrome、safari、opera

• Element:only-of-type
  概念：:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素（只要指定的元素是唯一的元素类型就可以）
  兼容性：IE9+、FireFox4+、chrome、safari、opera

• Element:empty
  概念：:empty选择器匹配没有子元素（包括文本节点）的每个元素
  兼容性：IE9+、FireFox、chrome、safari、opera
  例：<div> </div>(没有任何子元素及文本)

否定选择器(:not)
:not选择器匹配非指定元素/选择器的每个元素
语法格式：父元素:not（子元素/子选择器）
兼容性：IE9+、FireFox、chrome、safari、opera
例：nav > a:not(:last-of-type)

CSS权重

• 权重等级与权值
  行内样式(1000)>ID选择器(100)>类
  属性选择器和伪类选择器(10)>元素和伪类(1)>*(0)

• 权重计算口诀
  从0开始，一个行内元素+1000，一个id+100，一个属性选择器、class或者伪类+10，一个元素名或者伪元素+1

规则：

1.包含更高权重选择器的一条规则拥有最高的权重
2.ID选择器(#idvalue)的权重比属性选择器([id=”idvalue”])高
3.带有上下文关系的选择器比单纯的元素选择器权重要高

1
2

<section><article></article></section>
section > article{}(权重=1+1) > article{}(权重=1)

4.与元素“挨得近”的规则生效：行内css直接写到元素里面，用style控制，权重最高
5.最后定义的规则会覆盖上面与之冲突的规则
6.无论多少个元素组成的选择器，都没有一个class选择器的权重高
div section article div权重 < class=""权重
7.通配符选择器权重为0，被继承的css属性也带有权重，权重也是0

伪元素
css伪元素用于向某些选择器设置特殊效果
语法：元素(泛指一切选择器)::伪元素
兼容性：IE9+、FireFox、chrome、safari、opera

• ::first-line
  根据first-line伪元素中的样式对Element元素的第一行【文本】进行格式化
  说明：只能用于块级元素：div、section、header（span为行级元素，不可用）

• ::first-letter
  用于向文本首字母设置特殊样式 【说明：只能用于块级元素】

• ::before
  在元素的内容前面插入新的内容【说明：常配合”content”使用】
  特点：1.div的第一个子元素 2.行级元素 3.内容通过content写入 支持一切css属性 4.标签中找不到对应的标签

• ::after
  在元素的内容后面插入新的内容【说明：多用于清除浮动，子元素浮动后父元素高度塌陷】
  header::after{display:block; content:"";clear:both;}

• ::section
  用于设置在浏览器中选中文本后的前景色与背景色
  兼容性说明：IE中只有IE9+版本支持，在FireFox中需加上前缀”-moz-“
  div::section{background:red;color:#ff0;}元中的文字变为红底黄字，默认蓝底白字

  
  ## CSS3边框与圆角

css3圆角

border-radius属性
一个最多可指定四个border-*-radius属性的复合属性，这个属性允许为元素添加圆角边框
语法格式：border-radius:1-4 length|% / 1-4 length|%
兼容性：IE9+、FireFox4+、chrome、safari5+、opera
例：

1
2

border-radius:5px,5em,5rem,5vw(任何单位)
border-radius:10%;百分比的长度是关于元素本身，长方形取50%会变成椭圆

多值：

四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角右下角 右上角左下角

border-top-left-radius左上 border-top-right-radius右上
border-bottom-left-radius左下 border-bottom-right-radius右下
说明：兼容前缀：[-webkit- chrome] [-moz- FireFox] [-ms- IE] [-o- opera]

css盒阴影

box-shadow属性：可以设置一个或多个下拉阴影的框
语法：box-shadow:h-shadow(水平方向偏移量) v-shadow(竖直方向偏移量) blur(模糊 不能为负) spread(扩展) color(颜色) inset(内阴影)
兼容性：IE9+、FireFox4+、chrome、safari5+、opera
例：
box-shadow：50px 30px 10px(模糊) 10px(扩展 上下左右扩展10px) insert
从左上角的位移水平竖直对应像素内阴影，模糊也在内部

css3边界图片

border-image属性：使用borde-image-*属性来构建可扩展按钮
语法：border-image:source slice width outset repeat
兼容：IE不兼容 opera不兼容 FireFox、chrome、safari6+

• border-image-source属性：
  指定要使用的图像，而不是由border-style属性设置的边框样式
  语法：border-image-source:none|url;

• border-image-slice属性：
  指定图像的边界向内偏移多少
  语法：borde-image-slice：number|%|fill;
  以div的百分比/长度来显示边框大小，越大则缩放越大
  fill值：当图片在边角显示时会包含图片之间的空白部分而不是只有图片

• border-image-width属性：
  指定图像边界的宽度
  语法：borde-image-width：number|%|auto；

• border-image-outset属性：
  指定在边框外部绘制border-image-area的量（向外扩张）
  语法：borde-image-outset：number|length；

• border-image-repeat属性：
  用于图像边界是否应重复、拉伸、铺满
  语法：borde-image-repeat：stretch(拉伸) repeat(重复) round(铺满) initial(默认=stretch) inherit(继承)；

css3背景与渐变

css3背景图像区域

background-clip属性：指定背景绘制区域
语法：background-clip：border-box(边框盒子)|padding-box(内边距盒子)|content-box(内容盒子)
兼容：IE9+、FireFox、chrome、safari、opera
要设置border和padding，背景被剪裁到border盒子padding盒子content盒子

css3背景图像定位

background-origin属性：指定background-position属性应该是相对位置
语法：background-origin：border-box(边框盒子)|padding-box(内边距盒子)|content-box(内容盒子)
兼容：IE9+、FireFox4+、chrome、safari5+、opera
背景图片相对于border盒子padding盒子content盒子的左上角来定位（偏移量）
例：

1
2

background:url() no-repeat 50px 100px;
background-origin:border-box;

css3背景图像大小

background-size属性：指定背景图片大小
语法：background-size：length|percentage|cover|contain
兼容：IE9+、FireFox4+、chrome、safari5+、opera
例：background-size:100% auto; 100% 100%; 50%;
当只设置一个值时，根据宽度等比缩放；当设置两个值时，按设定值显示。
cover：将图片等比缩放以填满整个容器，不留白。
contain：将图片等比缩放至某一边满足容器边缘。

css3多重背景图片

允许使用多个背景图片
语法：background-image:url(),url()…;(前面的图会依次覆盖后面的图)
兼容：IE9+、FireFox、chrome、safari、opera
要设置border和padding，背景被剪裁到border盒子padding盒子content盒子

css3背景属性整合

可以在一个声明中设置所有背景属性
background:color position size repeat origin(定位) clip(区域) attachment(状态：滚动/不变fixed) image
例：【最佳格式】

1
2
3
4
5

background:#abc url() no-repeat center center;
background-size:50%;
background-origin:content-box;
background-clip:content-box;
background-attachment:fixed;

css3渐变

兼容：
IE10+ | Chrome26+|FireFox10+|safari6.1+|opera12.1+

• | :-: | :-: | :-: | -:
• |10.0 -webkit-|3.6 -moz-|5.1 -webkit-|11.6 -o-

线性渐变
沿着一根轴线改变颜色，从起点到终点，颜色顺序渐变(默认从上到下)
语法：background：linear-gradient(direction方向,color-stop1,color-stop2…(多个渐变色))
例:【4种兼容】

1
2
3
4
5
6
7
8

div{
    width: ;
    height: ;
    background: -webkit- linear-gradient(red,blue);
    background:    -moz- linear-gradient(red,blue);
    background:      -o- linear-gradient(red,blue);
    background:          linear-gradient(red,blue);
}

渐变【从左到右】：

1
2
3
4

background: -webkit- linear-gradient(begin-direction,color-stop1,color-stop2…(多个渐变色));
background:    -moz- linear-gradient(end-direction,color-stop1,color-stop2…(多个渐变色));
background:      -o- linear-gradient(end-direction,color-stop1,color-stop2…(多个渐变色));
background:          linear-gradient(to end-direction,color-stop1,color-stop2…(多个渐变色));

【从左到右】例：

1
2
3
4

background: -webkit- linear-gradient(left,red,blue);
background:    -moz- linear-gradient(right,red,blue);
background:      -o- linear-gradient(right,red,blue);
background:          linear-gradient(to right,red,blue);

浏览器为webkit内核写开始方向，moz和o内核写结束方向

对角渐变

1
2
3
4

background: -webkit- linear-gradient(begin-level begin-vertical,color-stop1,color-stop2…(多个渐变色));
background:    -moz- linear-gradient(end-level end-vertical,color-stop1,color-stop2…(多个渐变色));
background:      -o- linear-gradient(end-level end-vertical,color-stop1,color-stop2…(多个渐变色));
background:          linear-gradient(to end-level end-vertical,color-stop1,color-stop2…(多个渐变色));

例：

1
2
3
4

background: -webkit- linear-gradient(       left top,red,blue);
background:    -moz- linear-gradient(   right bottom,red,blue);
background:      -o- linear-gradient(   right bottom,red,blue);
background:          linear-gradient(to right bottom,red,blue);

使用角度：background:linear-gradient(angle(角度),color-stop1,color-stop2…(多个渐变色));
例：background:linear-gradient(45deg,red,yellow,blue);

颜色结点多，多个颜色控制，默认等分
规定颜色过渡：(90deg,red 10%,orange 15%,yellow 20%,…,violet 100%)
若渐变色没有填充100%，则最后的颜色会将剩下的部分以纯色形式填充，没有渐变。

透明渐变：(90deg,rgba(255,0,0,0(透明度)))(90deg,rgba(255,0,0,0.5(透明度)))(调整渐变过渡)(90deg,rgba(255,0,0,1(透明度)))

重复渐变：background:repeating-linear-gradient(color|length|percentage)
background:repeating-linear-gradient(90deg,red 0% blue 20%(100%均分))

css3径向渐变：从起点到终点颜色从内到外进行圆形渐变
background:radius-gradient(center,shape,size,start-color…last-color(多个渐变色))默认颜色结点均匀分布

• 颜色结点不均匀分布
  background：radius-gradient(red 50%,blue 70%);
  0-50%为红色纯色 70%-100%为蓝色纯色，百分比范围外的颜色为纯色，百分比长度是从圆心到角的距离

• 设置形状
  background：radius-gradient(shape,color-stop1，color-stop2…);
  形状：circle-圆 ellipse-椭圆 如果元素宽高值一样，则两种都显示为圆形

• 尺寸大小关键字
  background：radius-gradient(size,color-stop1，color-stop2…);
  size与shape为同一参数，不能用，隔开
  closest-side：最近边 farthest-side：最远边
  closest-corner：最近角 farthest-corner：最远角
  从圆心到选择的关键字会产生渐变，其他部分自适应

• 控制圆心位置
  background：radius-gradient(30% 70%,closest-corner circle,red,blue);
  椭圆分为长轴和短轴，选择角时最近角为短轴，长轴为到第二近的角

重复渐变
background:repeating-radial-gradient(color1 length|percentage,color1 length|percentage…)

IE渐变(颜色十六进制，IE10以下)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='startColor',endColorstr='endColor',GradientType=0/1/2);
gradienttype的值：0为上下，1为左右，2结束颜色到黑色

CSS3转换

css3 transform属性
让元素在一个坐标系统中变形，这个属性包含一系列变形函数，可以移动、旋转和缩放元素
语法：transform:none(默认)|<transform-function>(可以有多个)
兼容：IE12+,FireFox16+,Chrome36+,safari16+,opera23+

CSS3 2D转换

旋转rotate：通过指定的角度参数对原元素指定一个2D旋转
语法:transform:retate(<angle>));
angle是指旋转的角度，正数顺时针，负数逆时针
例：[兼容]

1
2
3
4

-webkit-transform:rotate(7deg);
   -moz-transform:rotate(7deg);
     -o-transform:rotate(7deg);
        transform:rotate(7deg);

移动translate：translate()方法根据左(x轴)，顶部(Y轴)位置给定的参数从当前元素位置移动

translateX(x)仅水平方向移动
translateY(y)仅垂直方向移动
translate(x，y)水平和垂直方向同时移动

语法:transform:translateX(200px/em/vw/vh/rem/%)|translateY(100px)|translate(200px,100px);
没有第二个值则默认0，第一个值不能不写，要用0代替

缩放scale：translate()方法根据左(x轴)，顶部(Y轴)位置给定的参数从当前元素位置移动

scaleX(x)仅水平方向缩放
scaleY(y)仅垂直方向缩放
scale(x，y)水平和垂直方向同时缩放

语法:transform:scaleX(.5)|scaleY(.3)|scale(.5,.3);
x.y的缩放原点线始终在中线，若不写第二个值默认与第一个值相同，只有一个值会等比缩放

扭曲skew：斜切变化

skewX(x)仅水平方向扭曲变形
skewY(y)仅垂直方向扭曲变形
skew(x，y)水平和垂直方向同时扭曲变形

语法：transform:skewX(15deg)|skewY(15deg)|skew(15deg,15deg)

倾斜角度：
Y：正值顺时针，负值逆时针(90deg消失)
X：正值逆时针，负值顺时针
只有一个参数第二个默认0

矩阵matrix：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
语法：transform：matrix(a,c,b,d,tx,ty);
tx,ty就是基于x,y坐标重新定位元素

CSS3 3D转换

旋转rotate

• 旋转rotateX/Y：指定对象在X/Y轴上的旋转角度
  transform:rotateX/Y(<angle>);

css3 3D旋转

• 旋转rotateZ：指定对象在Z轴上的旋转角度,图片围绕Z轴旋转
  transform:rotateZ(<angle>);
• 旋转rotate3d：指定对象3D旋转角度
  tansform:rotate3d(x,y,z,angle)
  x,y,z表示旋转方向 angle表示旋转角度，参数不能省略
  当只有一个参数时，旋转方向只有0和非0的区别，当有多个方向改变时，用小数点区分在该方向上的变换程度，最大为1，
  例：transform:rotate3d(1,1,1,4deg)则.1为4.5deg，参数只支持到.01

移动translate

• 移动translateZ：指定对象在Z轴上平移
  transform:translateZ(200px);
  参数对应z轴，不许省略，用于遮罩
• 旋转translate3d：指定对象3D平移
  tansform:translate3d(x,y,z)不能省略

缩放scale

• 移动scaleZ：指定对象在Z轴上缩放
  transform:scaleZ(.5);
  参数对应z轴，不许省略，用于遮罩
• 旋转scale3d：指定对象3D缩放
  tansform:scale3d(x,y,z)三个参数缺一不可

矩阵matrix3d：以一个4*4矩阵的形式指定一个3D变换
语法：transform:mateix3d(sx,n,n,n,n,sy,n,n,n,n,sz,n,n,n,n);
旋转+移动+缩放=矩阵

css3 Trsnsform与坐标系统
transform-origin属性:允许更改转换元素的位置
transform-origin:x-axis,y-axis,z-axis;(坐标)
transform-origin：25% top;

css3中的矩阵：指一个方法 书写为matrix()和matrix3d()
matrix是元素，2D平面的移动变换，2D变换矩阵为33
matrix3d是元素3D的移动变换 3D变换矩阵为44

• matrix矩阵位移：transform：matrix(a,c,b,d,tx,ty);

目标矩阵说明：ax+cy+e为变换后的水平坐标，bx+by+f表示变换后垂直坐标元素中心点改变
转换公式：x,y表示转换元素的所有坐标，xy为transform-origin中的值
transform:matrix(1,0,0,1,x,y);=transform:translate(x,y);
matrix在FireFox浏览器下需要添加单位，webkit内核默认px，translate等方法需要加单位

• 矩阵matrix缩放(scale)
  matrix(sx,0,0,sy,0,0)=scale(sx水平缩放,sy垂直缩放)

• 矩阵matrix旋转(rotate)
  matrix(cos,sin,-sin,cos,0,0)=rotate(deg);cos和sin不能写角度，要计算数值
  transform：matrix(.7071,.7071,-0.7071,.7071,0,0);=translate:rotate(45deg)

• 矩阵matrix拉伸(skew)
  matrix(1,tany,tanx,1,0,0)=skew(xdeg,ydeg);
matrix(1,1,1,1,0,0)=skew(45deg,45deg)

• 矩阵matrix镜像对称效果
  matrix(1-k*k)/(1+k*k),2k/(1+k*k),(k*k-1)/(1+k*k),0,0)
  k为对称轴y=kx的斜率 对称轴一定通过元素变换的中心点
  transform:matrix(-0.6,.8,.8,.6,0,0);

3D变换中的矩阵
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

CSS扩展属性

transform-style属性:指定嵌套元素是怎样在三维空间中呈现
语法:transform-style:flat(默认值)|preserve-3d(开启3d，可以旋转被盖住)

perspective属性
指定观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
perspective:number(px)|none(默认);会离视线越来越近

• perspective-origin属性：指定透视点位置
  perspective-origin：x-axis y-axis; 默认perspective-origin:50% 50%;
  perspective-origin：bottom|center|inherit|initial|left|right|top|px;

• backface-visibility属性：指定元素背面面向用户时是否可见
  backface-visibility:visible(默认值)|hidden;

CSS3过渡

-允许css的属性值在一定的时间区间内平滑的过渡
-鼠标单击获得焦点 被点击或对元素任何改变中触发，并圆滑的以动画效果改变css属性值
兼容：IE10+，FireFox16+，Chrome26+，safari6.1+，opera12.1+

transform-property属性：检索或设置对象中的参与过渡的属性
transform-property:none|all(默认)|property(写元素属性名【例：transform-property:color;】)
例：[兼容]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

div{
    transform:rotate(0deg);
    -webkit-transform-property:transform(名称);
       -moz-transform-property:transform;
        -ms-transform-property:transform;
         -o-transform-property:transform;
            transform-property:transform;
}
div:hover{
    translate:rotate(180deg);
     -webkit-transform-property:transform(名称);
       -moz-transform-property:transform;
        -ms-transform-property:transform;
         -o-transform-property:transform;
            transform-property:transform;
}

[显示为:鼠标经过时图片会进行180°旋转]
如果不写transition-property属性表示all所有属性支持过渡

transition-daration属性：检索或设置对象过渡的持续的时间
语法：transition-daration：time;
参数说明：规定完成过渡效果需要花费的时间(s/ms)，默认是0

transition-timing-function属性：检索或设置对象中过渡动画的模型
语法：transition-timing-function： ；
参数说明：

-linear：线性过渡(匀速运动) / -ease(默认)：平滑过渡(由慢到快，后变快幅度减慢) / -ease-in：由慢到快 / -ease-out：又快到慢 / -ease-in-out：慢快慢 / -step-start / -step-end / steps：接受两个参数的步进函数

第一个参数：必须为正整数指定函数
第二个函数：取值可是start.end,指定每一步的值发生变化的时间点 可选 默认end

transition-delay属性：检索或设置对象延迟过渡的时间
语法：transition-delay:time(s/ms);默认0

transition复合属性
transition:property duration timing-function delay

CSS动画

是元素从一种样式逐渐变化为另一种样式的效果
兼容：IE10+,FireFox16+,Chrome43+,Safari9+,Opera30+,Android(-webkit-)
手机设备的浏览器在使用css3动画时，要加上webkit前缀

CSS3 animation

animation-name属性：检索或设置对象所应用的动画名称
animation-name:keyframename(指定要绑定到选择器的关键帧名称)|none(指有没有动画，可用于覆盖从级联的动画)

animation-duration属性：检索或设置对象动画的持续时间
animation-duration:time;默认为0，意味着没有动画效果

例：

1
2
3
4
5
6
7
8
9
10
11

div > .inner{
    background-image:url();
    -webkit-animation-name:circle_inner;
            animation-name:circle_inner;
    -webkit-animation-duration:10s;
            animation-duration:10s;
}
@keyframes circle_inner{
    from{transform:rotateX(0deg);}
    to{transform:rotateX(360deg);}
}

animation-timing-function属性：检索或设置对象动画的过渡类型

-linear：线性过渡(匀速运动) / -ease(默认)：平滑过渡(由慢到快，后变快幅度减慢) / -ease-in：由慢到快 / -ease-out：又快到慢 / -ease-in-out：慢快慢 / -step-start / -step-end / steps：接受两个参数的步进函数

animation-delay属性：检索或设置对象动画的延迟时间
语法：animation-delay：time;
参数说明：可选，定义动画开始之前等待的时间，s/ms，默认为0
1s=1000ms 500ms=0.5s写成.5s

animation-iteration-counter属性：检索或设置对象动画的循环次数
语法：animation-iteration-counter:infinite|number默认1;
开启循环后，只有动画刚开始时delay起作用，循环后delay不起作用

animation-direction属性：检索或设置对象动画在循环中是否反向运动
语法：animation-direction:normal(正常方向)|reverse(反方向)
alternate：动画先正常运行再反方向运行，并持续交替运行(一定要设置循环)
alternate-reverse：动画先反运行再正常方向运行，并持续交替运行(一定要设置循环)
若不设置循环(animation-iteration-counter),则只正常运行/反方向运行一次就停止

animation-fill-mode属性：规定当动画不播放时(当动画完成或当动画有延迟未开始播放时),要应用到元素的样式
语法：animation-fill-mode:none(默认,不设置动画对象之外的状态)|forvards(设置对象状态为动画结束时的状态)|backwards(设置对象状态为动画开始时的状态)|both(设置对象状态为动画开始或结束时的状态)
例：正常动画在360deg时结束，更改为transform:rotateX(315deg)后，动画会在315deg时停止

animation-play-state属性：指定动画是否正在运行或已暂停动画状态
animation-play-state:paused(暂停)|running(默认值，正在运行)
例：div:hover > div{animation-play-state:running}鼠标放上时运行

transition需要触发事件(有鼠标参与)，animation无需触发事件

animation复合属性
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
name duration必须有，且位置固定，自动识别其他顺序不固定

CSS3 @keyframes
keyframes定义：关键帧，可以指定任何顺序排列来决定animation动画变化的关键位置
使用说明：使用@keyframes规则创建动画通过逐步改变，从一个css样式设定到另一个在动画过程中可以通过@keyframes规则多次更改css样式的设定
语法：

1
2
3

@keyframes animationname{
    keyframes-selector{css-style}
}

animationname必写 定义animation名称
keyframes-selector必写 动画持续时间的百分比from(0%)to(100%)
css-style必写 一个或多个合法的css样式属性
animation-name:animation;
例：

1
2
3
4
5
6

@-webkit-keyframes circle-inner{
    0%{transform:rotateX(0deg);}
    25%{transform:rotateX(45deg);}
    75%{transform:rotateX(315deg);}
    100%{transform:rotateX(360deg);}
}

0%可以用from代替，100%可用to代替

优化流畅显示

1. position-fixed代替background-attachment
2. 带图片的元素放在伪元素中
3. will-change

css3 will-change：增强页面渲染技能
CPU中央处理器 GPU图形处理器
硬件加速 在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU功能工作量

translateZ() / transform3d() Hack：为元素添加没有变化的3D变形，骗取浏览器触发硬件加速
浏览器创建layer层并触发GPU，GPU处理完成到layer层
代价：通过向他自己的层叠加元素，占用RAM和GPU存储空间

will-change：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
语法：will-change：auto(无特定意图，适用通常所做的任何启发和优化)|scroll-position(表示将要改变元素的滚动位置)|contents(表示将要改变元素内容)custom-ident(明确指定将要改变的属性与给定的名称)|animateable-feature(动画的一些特征值，如left、top、margin等)
兼容:IE13+,FireFox47+,Chrome49+,safari9+,opera39+,ios9.3+,Android52+
custom-ident会给动画一个虚拟层，渲染到虚拟层，减少性能
animation-feature会改变css，浏览器会不断渲染，增加性能，不建议使用
例：

1
2
3
4
5
6

div > div{
    -webkit-will-change:transform(要变化的属性);
       -moz-will-change:transform(要变化的属性);
         -o-will-change:transform(要变化的属性);
            will-change:transform(要变化的属性);
}

网页刚加载就会提醒，触发才起作用

使用注意：

1. 勿滥用(每加载一个元素浏览器都发注意给浏览器，浏览器罢工)
2. 提前申明(先写will-change再写改变的元素)
3. remove(浏览器会一直保持着这个请求，让GPU留意，但实际已经不用了)
4. 要放在父级元素上