1. CSS3高级特性
CSS3高级特性主要包括：
盒子新特性
多栏布局
弹性布局
2D变换
3D变换
过渡属性
动画属性
1.1. 盒子新特性
CSS3中的盒子，有如下几点加强：
盒子阴影
边框可设定圆角；
可用图片做边框；
背景图可进一步设定定位原点和大小；
背景图可进行裁切；
背景图可使用渐变色。
1.1.1. 盒子阴影box-shadow
l 属性：
box-shadow
l 作用：
用于设定一个盒子的阴影效果
l 形式：
box-shadow：水平偏移值 垂直偏移值 [模糊值] [外延值] [颜色] [inset]；
l 说明：
1，至少设置两个长度值，分别表示阴影的水平偏移量和垂直偏移量，可以为负；
2，模糊值是设定阴影的模糊效果的宽度，可以不设置，则默认为0；
3，外延值是设定阴影再“扩大”的宽度，可以不设置，则默认为0；
4，inset表示设置“内阴影”，可以不设置，则默认为外阴影。
l 举例：
.box1{ box-shadow: 2px 2px red; }
.box2{ box-shadow: 2px 5px 2px #00FFFF; }
.box3{ box-shadow: 2px 5px 2px 3px rgba(33, 33, 33, 0.5); }
.box4{ box-shadow: 2px 5px rgba(66,66,66,0.5) inset; }
演示：
1.1.1. 圆角边框border-radius
l 属性：
border-radius
l 作用：
用于设定一个盒子的圆角特性。
l 形式：
border-radius: 水平圆角半径 [/ 垂直圆角半径]；
l 说明：
1，垂直半径可以省略，则其同水平半径的值。
2，半径设置可以提供1~4个值，具体如下。
提供1个：4个角都为该值；
提供2个：第1个表示左上和右下，第2个表示右上和左下；
提供3个：第1个表示左上，第2个表示右上和左下；第3个表示右下；
第供4个：分别代表4个角上的半径（依次左上，右上，右下，左下）
l 举例：
border-radius: 5px; //4个角半径均为5px；
border-radius: 5px/15px; //4个角水平半径为5px，垂直半径为15px；
border-radius: 5px 6px 7px 8px; //四个角半径分别是5px，6px，7px，8px；
border-radius: 5px 6px 7px 8px/15px 16px 17px 18px;
有关水平半径和垂直半径的图示：
代码为：
border-radius: 40px 20px / 25px 15px;
案例：
实现一个圆形头像。
版本1（可能会变形）：
版本2：
2.1.3. 图像边框border-image
2.1.3.1. 原理说明
图像边框是指使用一张图片来作为一个盒子的边框。其实就是将图片作为背景图铺上到“边框区域”上去。
但这个铺设到边框的图片，并非像常规背景图那样简单直接地铺设上去，而是有其特定的规则。
边框上铺设图片的基本原理如下图所示：
其铺设原理是：
将要作为背景的图片，分割为9个部分（如上图所示），然后4个角4个边分别铺设对应部分，中间区域就铺设背景图片的中间部分。其中4个边和中间区域，可以类似常规背景一样进行“平铺(repeat)”,或进行拉伸(缩放)。从而达到整个盒子的完美背景呈现。
其主要用于实现类似下面这类“可变内容”的盒子背景：
2.1.3.2. 主要属性
边框背景的主要属性有：
l border-image-source:
设置作为边框背景的图片源；
l border-image-slice:
设置要将边框背景图片进行“切割”的分割方式。形式为：
border-image-slice: 数值 [fill]; //特别注意：这里的数值不带单位！
其中“数值”可以是1-4个值，分别代表上右下左4个方向的“切割厚度”。
fill代表“填充”，用于中间区域填充到盒子内容区。
l border-image-width:
设置图片边框的宽度，也可以设定1-4个值。
通常设定为auto（自动），此时就会使用border-image-slice所设定的切割厚度。
l border-image-repeat:
设置边框背景的填充方式，可以设定1-2个值，表示横向和纵向的填充方式。
可用值如下：
stretch： 指定用拉伸方式来填充边框背景图，这是默认值，也最常用，推荐使用。
repeat： 指定用重复平铺方式来填充边框背景图。类似背景图的repeat，背景图不改变大小。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
注：有的浏览其中应用边框图属性需同时设定border属性。
2.1.4. 背景图高级特性
前面有关一个盒子的背景设置，我们主要学习了这几个基本属性：
text-indent: -21pt;">l background-attachment：
设置背景图像的滚动特性，可用值有：
scroll： 相对于当前盒子固定（盒子滚动，则背景图也会滚动），这是默认值。
local： 相对于当前盒子的内容固定（内容滚动，则背景图也会滚动）。
fixed： 相对于当前浏览器窗体固定（类似固定定位，即它会始终在窗口的某个位置）。
l background-origin:
设置背景图像的参考原点（位置），实际就是背景出现的范围。可用值有：
border-box： 在boder区域范围内（含border）。
padding-box：在padding区域范围内（含padding），这是默认值。
content-box： 在内容区域范围内。
此属性主要是跟background-position的位置计算有关。
l background-clip:
设置背景图像向外裁剪的区域，裁剪范围以外就被裁剪了(不显示)。可用值有：
border-box： 从border区域外沿（即不含border）开始向外裁剪背景，这是默认值。
padding-box：从padding区域外沿（即不含padding）开始向外裁剪背景。
content-box： 从content区域外沿开始向外裁剪背景。
l background-size: 值1 [, 值2]
设置背景图像的大小，可设置2个值，分别表示横向和纵向的大小。可用值有：
长度： 用长度值指定背景图像大小。不允许负值。
百分比： 用百分比指定背景图像的缩放大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像不超出容器。
l 背景重复性的值在C3中多两个可用的值：round，space
l 多背景：一个盒子可设置多个背景图，其形式为：
background：第一个背景图设置，第二个背景图设置，... [，背景颜色]；
比如：
background:
背景原 背景位置[/背景大小] 背景重复性 背景滚动性 .... ，
背景原 背景位置[/背景大小] 背景重复性 背景滚动性 .... ，
......
背景颜色；
案例1：
background-attachment演示：
案例2：
演示background-origin, background-clip, background-size:
演示3：
演示背景重复性的两个新特性：space, round
上午回顾
2.1.5. 渐变背景gradient
渐变背景其实是设置background-image属性的值，设置的不是一个单一颜色，而是多个颜色，并按给定方式进行渐变。
2.1.5.1. 线性渐变linear-gradient
含义：
线性渐变是让背景颜色按照某个方向（角度）的方式来进行过渡变化。
语法：
background-image：linear-gradient ( [角度，] 颜色1，颜色2 [，颜色n...] );
说明：
1，角度以从下到上（12点整的方向）为0度，顺时针为正角度，可省略，则为默认值180度。
2，角度还可以使用to left，to right，to top， to bottom这几个关键字；
3，至少设置2个颜色（这样才能实现渐变）；可设置多个颜色，都能自动实现渐变；
4，每个颜色还可以设置“截止位置”，表示该颜色在渐变中的“关键位置”，形式为：颜色 位置，比如：red 30px; 或 #00ff00 20%;
举例：
background-image：linear-gradient(red, blue); //从上到下由红色转蓝色
background-image：linear-gradient(90deg, red, blue); //从左到右由红色转蓝色
background-image：linear-gradient(90deg, red, blue, green); //从左到右由红色转蓝色再转绿色
background-image：linear-gradient(45deg, red, blue 30%, green ); //从左下角到右上角，由红色转蓝色到30%位置，然后再渐变为绿色终止
演示1：
横向三色均匀渐变。
演示2：
横向三色不均匀渐变。
演示3：
斜向多色不均匀渐变，终止于局部。
2.1.5.2. 径向渐变radial-gradient
含义：
径向渐变是让背景颜色从某个中心点以圆或椭圆向外扩散的方式来进行过渡变化。
语法：
background-image：radial-gradient( [形状] [大小] [at 位置，] 颜色1，颜色2 [，颜色n...])
说明：
1，形状可以是circle（圆）或ellipse（椭圆），省略时默认是跟随盒子（可能是圆，也可能是椭圆）；
2，大小是指渐变从圆心开始向外进行过渡变化的半径大小，圆用一个值，椭圆用2个值（空格隔开）；
大小还可以使用如下4个关键字：
farthest-corner： 最远角，表示从圆心开始，渐变到最远的角的位置。下面也类似；
farthest-side： 最远边；
closest-corner： 最近角；
closest-side： 最近边；
默认是从圆心渐变到最圆角(farthest-corner)。
3，位置表示设定圆或椭圆的中心点，可以是一个值（表示横坐标，纵坐标默认居中），或2个值（横纵坐标，空格隔开）；位置还可以使用top， right， bottom，left，center这5个关键字；
4，颜色至少包含2个，每个颜色还可以设定“截止位置”；
举例：
background-image: radial-gradient(red, green, white); //默认为适应盒子，并在中心，最简模式
background-image: radial-gradient(circle,red, green, white); //设定为圆形
background-image: radial-gradient(circle at 60px 30px, red, green, white); //圆心位置为（60,30）
background-image: radial-gradient(farthest-side at 60px 30px, red, green, blue); //渐变到最远角
background-image: radial-gradient(circle closest-side, red, green, blue);//圆形，渐变到最近的边
background-image: radial-gradient(100px, red, green, blue);//大小为100px(圆形)，默认在中心位置
background-image: radial-gradient(100px 50px, red, green, blue);//大小为100px和50px(椭圆形)
演示1：
多个200x100的盒子，分别具有如下径向渐变背景图：
1，自动形状，自动半径，自动位置，三颜色（红绿蓝）渐变。
2，圆形，自动半径，圆心位置为50px，70px，三颜色（红绿蓝）渐变。
3，圆形，到最远角，圆心位置在右上角，四颜色（红绿蓝黄）渐变。
4，椭圆形，圆心位置在左侧中点，四颜色（红绿蓝黄）渐变到120px。
做一个叶子：
2.2. 多栏布局column
2.2.1. 基本概念
所谓多栏布局，就是一个盒子设置栏宽属性或栏数量属性，就构成多栏布局，则其中的内容，会先在第一栏展示，第一栏展示满后，再展示到第二栏，以此类推。
多栏布局最常见的就是杂志或报纸上常见的“分栏版面”。比如杂志最常用的是分为两栏。
多栏布局通常用于盒子内部主要以文字（行内元素）为主的情形。
给一个盒子设定栏宽属性或栏数量属性（二选一），就可以实现多栏布局效果。
通常效果类似这样：
2.2.2. 主要属性
l 栏宽度属性column-width
设定分栏布局中一个栏的宽度值；实际宽度会根据外层盒子的宽度有所调整（可能变大）。
l 栏数量属性column-count
设定分栏布局中的总栏数。
l columns属性：
上述column-width和column-count的综合属性；
使用形式：columns: 栏宽值 栏目数；
实际表现上，当总宽度大于等于“栏宽x栏目数”时，栏目数固定，栏宽可能会有所调整（变大）。
当总宽度小于“栏宽x栏目数”时，栏目数会减少（保证栏宽不小于设定的栏宽）。
l 栏间隙属性column-gap
设定栏与栏之间的宽度值，默认是font-size大小（比如14px）
l 栏分割线属性column-rule
栏分割线属性，就是两栏之间的线，如果不设定默认就是“空的”，就没有分割线，只有间隙（gap）。
栏分割线属性类似边框线（但只是一条线），可以设定：线宽，线型，线色。
有如下几个属性：
column-rule-width：设定线宽，比如1px，5px；
column-rule-style：设定线型，比如solid，dashed，dotted；
column-rule-color：设定线色，比如red， #ff9966， rgb(200,100,0)
column-rule：上述3个属性的综合属性。
2.2.3. 应用案例
实现如下图示的分栏布局效果。
今日回顾：
background的多背景注意细节：
background：
背景图1的设置， /*前面的*/
背景图2的设置，
.... /*后面的*/
背景颜色;
注意：
背景图前面的（背景图1）会覆盖后面的（背景图n），
背景颜色会被前面的背景图覆盖
如果要实现有意义的背景，前面的背景图通常不能做“重复”。
列表样式：
list-style-type: disc, cirle, square, decimal,
也可以设置为：list-style-type: none;
list-style-image: url(...); //设置列表项目图标
list-style-position: 图标位置（li里还是外）
表格样式：
border-collapse: collapse（合并），separate(分离)
border-spacing: 单元格间隙
caption-size: top, bottom
盒子阴影：
box-shadow: 水平偏移值 垂直偏移值 [模糊值] [外延值] [颜色] [inset]
圆角边框：
border-radius：水平圆角半径 [/垂直圆角半径]
水平圆角半径可以设置1-4个值。
图像边框：
border-image-source:
border-image-slice:切片厚度 [fill];
切片厚度可以设置1-4个值，只能是“数字”！
border-image-width: auto， 或 1-4个宽度值
border-image-repeat: stretch（拉伸，是默认值），repeat, round, space
背景高级特性：
background-attachment: scroll， local， fixed
background-origin:设定原点（背景图的起始位置）
background-clip:裁切，border-box, padding-box, content-box
background-repeat: 另外两个重复特性：round, space
background-size:设置大小：宽度 高度
特殊大小：
cover: 调整图大小以“完全覆盖盒子”；
contain：调整图大小以“完全显示图”
多背景。。。
渐变背景图：
渐变属于background-image的值；
background-image: linear-gradient（[角度，] 颜色1，颜色2，..... ）
background-image: radial-gradient（[形状] [大小] [at 位置, ] 颜色1，颜色2，..... ）
形状：circle, ellipse
大小：一个值（circle），或2个值（ellipse）
4个特别的大小设置词：
farthest-coner
farthert-side
closest-color
clolest-side
位置：一个或两个
也可以使用：left, right, top, bottom, center
多栏布局：
column-width:栏宽
column-count:栏数
columns：
column-gap：间隙大小
column-rule: 一个线的设置项：线性 线宽 线颜色
2.3. 弹性布局flex
2.3.1. 基本概念
弹性布局是指，可以设定一个容器盒子中的若干个（数量可变的）子盒子，在父盒子中的横向或纵向有序整齐排列。其典型应用就是页面中的导航布局的实现，如下图所示：
弹性布局的实现，主要是在父盒子（容器盒子）上定义相应的属性，则其内部的子盒子就能够按照所定义
的样式进行显示。
2.3.2. 主要属性
弹性布局的主要属性设置包括如下几个：
display：flex；设置为弹性盒子模式；
flex-direction：设置弹性盒子的排列方向；
flex-wrap：设置弹性盒子是否可换行；
justify-content：设置弹性盒子在一行内的主轴方向的布置方式；
align-content：设置多行弹性盒子的行与行之间的布置方式；
align-items：设置弹性盒子在一行内的辅轴方向的布置方式；
l display: flex;
说明：设置盒子的显示模式为弹性盒模型，即该盒子成为了弹性盒模式的容器盒子。
l flex-direction:
说明：设置弹性盒模式的子盒子的排列方式，有如下4个方式（4个属性值）：
row：横向排列，
row-reverse：横向排列，但顺序反向
column：纵向排列
column-reverse：纵向排列，但顺序反响
l flex-wrap：
说明：设置弹性盒模式的子盒子超出时的换行特性，常用属性值有：
nowrap：不换行，尽量在一行显示，这是默认值。
此时有可能会超出父盒子（当子盒子有最小宽度设置时）。
wrap：自动换行。
wrap-reverse：换行，但反向显示（即其实显示到上一行去了）
l justify-content：
说明：设置子盒子的主轴方向的一行中的排布方式。
所谓主轴就是由flex-direction所决定的方向为主轴，对应另一个方向为辅轴。
假如flex-direction为row或row-reverse，则横向为主轴，纵向为辅轴。
假如flex-direction为column或column-reverse，则纵向为主轴，横向为辅轴。
常用属性值有：
flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面；
flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面；
center：子盒子完全从居中的位置开始排列出来，空隙留两边；
space-between：子盒子两边紧靠父盒子，空隙留在相互的中间且均等；
space-around：子盒子均衡布置，分布给每个盒子的空隙都一样。
图示如下：
两个重要概念：主轴，辅轴
主轴：横向布局，主轴就是水平方向，纵向布局，主轴就是垂直方向。
辅轴：跟主轴垂直的方向。
说明：设置子盒子在辅轴方向的排布方式，大于一行且辅轴有多余空间时时才有效。
常用的属性值有：
flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面；
flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面；
center：子盒子完全从居中的位置开始排列出来，空隙留两边；
space-between：子盒子两边仅靠父盒子，空隙留在相互的中间；
space-around：子盒子均衡布置，空隙均衡出现；
l align-items：
说明：设置子盒子在当前行中辅轴方向的对齐方式。
flex-start：子盒子定位于所设定的起始位置，空隙留后面；
flex-end：子盒子定位于设定的终止位置，空隙留前面；
center：子盒子定位于居中的位置，空隙留两边；
baseline：子盒子定位于基准位置；
stretch：子盒子进行拉伸（充满纵轴）；
2.3.3. 应用案例
实现类似如下网页效果的版面布局：
2.4.1. 基本概念
2D变换的基本含义是：将浏览器页面（电脑屏幕所在面）当做一个二维平面，然后，通过CSS的设置，使网页元素能够在这个平面上进行“形状或位置变换”。
简单说就是，在一个元素的“本来”外观表现上，可以对其实行：位移，旋转，缩放，斜拉变形等。
比如一个简单的“正常盒子”，可以变换为如下一些形式：
2.4.1. 主要属性
l transform：
这是最主要的变换属性；其实所有变换都是通过这个属性，使用不同的值来实现的。
而所用不同的值，主要就是指定不同的变换函数（一个单词），以及所需要变换的数值；
常用2D变换函数如下：
n transform: translatex(值)： 将元素水平移动给定的值；
n transform: translatey(值)： 将元素垂直移动给定的值；
n transform: translate(x值，y值)： 同时进行水平和垂直移动，比如：translate(15px, 20px)
n transform: rotate(角度值)： 将元素旋转给定的角度，比如：30deg
u 旋转的方向是：正值为顺时针方向，负值为逆时针方向；
n transform: scalex(比例值)： x方向进行缩放；
n transform: scaley(比例值)： y方向进行缩放；
n transform: scale(x比值, y比值): 同时进行水平和垂直方向的缩放，scale(1.5, 2)
n transform: skewx(角度值)： 将元素从x方向拉伸给定的角度；
n transform: skewy(角度值)： 将元素从y方向拉伸给定的角度；
n transform: skew(x角度,y角度): 将元素从x和y方向拉伸给定的角度；
特别注意：
1，对一个元素可以同时进行多项变换。
2，进行多项变换时，多个变换属性值要一并写在一起，相互之间用空格隔开，类似这样：
transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);
1，对于进行了变换的元素，虽然形状或位置都可能变了，但并不影响其他元素(即不影响布局效果)。
2，对于多项变换，即使每项设定的参数一样，但也可能会因为变换的顺序而最终表现不同。
l transform-origin：
指定变换时的“原点”（基点）；默认是该变换元素的“中心点”（center, center）；形式：
transform-origin：水平坐标 垂直坐标；
其中： 水平坐标可以用一个长度值，或百分比，或left，center，right；
垂直坐标可以用一个长度值，或百分比，或top，center，bottom；
2.4.3. 案例
将如下一张图片，实现如下所述的2D变换要求：
以图像左上角为原点，旋转15度，并左移20px，而后将x方向缩小为0.7倍；
最终效果类似这样：
2.5. 3D变换transform（3D）
2.5.1. 基本概念
3D变换是在2D变换的基础上，再加上一个维度（z轴），构成了三维空间。
新加上的这个z轴，是跟网页页面（电脑屏幕）垂直的那个方向，也就是眼睛到屏幕的“垂直线”。
z轴的正方向是从屏幕到眼睛的方向，如下图所示：
这就相当于将网页元素（一个矩形的平面）置于3D空间中，并对其实行某种变换。
2.5.1. 主要属性
3D变换仍然还使用2D变换的2个属性（transform和transform-origin），不过在transform的属性值中，又增加了若干变换函数，以达到在3D空间中将盒子进行某种变换操作的目的。
另外，对于3D变换，还会多出来几个属性，分别用于设定3D变换场景下所需要的一些特征信息。
3D变换的主要属性有：
l transform-style：
用于设定元素变换的方式（2D还是3D），默认是flat（平面，也就是2D）；
设置为preserve-3d，就可以实现3D变换。
l perspective：
透视距离，用于设定观察3D视图时眼睛离屏幕的距离，即观察点的远近。
默认透视距离是“无穷大”，即最远处。通常无需设置。
注意：该属性应该设置在变换元素的上级元素上。
l perspective-origin：
透视点，即观察3D视图时眼睛的位置，也就是眼睛直对屏幕的那个点在（x，y）坐标系上的坐标值。
默认为（center，center），也就是父元素的中心点。
注意：该属性应该设置在变换元素的上级素上。
l transform-orgin
含义跟2D变换一样，用于指定元素变换时的“原点”（基点）；
l transform
含义跟2D变换一样，只是多了一些有关3D变换的变换函数，主要有：
n translateX(x), translateY(y), translateZ(z), translate3d(x, y, z)： 移动变换
n rotateX(x角度), rotateY(y角度), rotateZ(z角度), rotate3d(x, y, z, deg)：旋转变换；其旋转规则为：
u 左手“抓住”某轴，大拇指指向该轴正方向，则正值会沿其余手指的方向旋转，否则相反；
u rotate3d中，x，y，z是数值，是相对大小，deg才是角度。
n scaleX(x), scaleY(y), scaleZ(z), scale3d(x, y, z)：缩放变换
2.5.3. 案例
制作一个“美女大围墙”，大致如下所示：
（注意：是若干张图片所围成的一个3D效果的贴图墙效果）
2.5.4. 2D变换和3D变换的总结对比：
实际上，2D变换和3D变换并没有本质的区别，无非是3D变换多出了一些变换函数（方式）。
而原来的2D变换函数也都照样可以用（毕竟2D变换无非只是在x-y平面上进行，不涉及z轴）。
注：
* 由于盒子是没有厚度的，因此scaleZ其实是无效的。
** Dx，Dy，Dz是3个数字，代表一个向量的方向。向量就是从原点出发到某个点的一条有向线。
2.6. 过渡效果transition
2.6.1. 基本概念
过渡（transition）是指，能够让一个元素的属性，从某个值，变换到另一个值的时候，不是表现为“立即实现”（突然变化），而是表现为“逐步变化”，则视觉效果看起来就是“动画效果”了。
过渡效果在应用中通常结合鼠标的动作而展现出来，最常见的就是使用“:hover”伪类。
比如：
天猫超市： https://chaoshi.tmall.com/
京东服饰： https://channel.jd.com/fashion.html
csdn首页： https://www.csdn.net/
过渡效果的设置主要设置如下几项：
参与过渡的属性名，过渡的时长，过渡的方式，以及过渡发生前的延迟时间。
基本概念演示案例：
一个基本的盒子，宽高100x50，带边框和背景，使用hover变换其宽高或背景。
2.6.2. 主要属性
l transition-property：要用于实现过渡的属性名；
l transition-duration：过渡时长；比如：2s；
l transition-timing-function：过渡方式；常用的过渡方式如下所示：
n linear：线性过渡。
n ease：平滑过渡，这是默认值
n ease-in：由慢到快。
n ease-out：由快到慢。
n ease-in-out：由慢到快再到慢。
l transition-delay：过渡效果发生前的延迟时长，比如：1s。
l transition：以上4属性的综合属性，并可以设定多属性过渡效果（如位置和颜色同时变化)，形式如下：
n transition：第1个过渡 [，第2个过渡] [，第3个过渡] [......]；
n 每个过渡的形式为：过渡属性名 过渡时长 [过渡方式] [延迟时长]；
代码示例：
示例1：
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in-out;
trasitiion-delay: 3s;
示例2：
transition: width 2s ease-in-out 3s;
示例3：
transition-property: width, height, background ;
transition-duration: 2s 3s 3s;
transition-timing-function: ease ease-in-out linear;
trasitiion-delay: 3s 2s 0s;
示例4：
transition: width 2s ease , height 2s 2s linear, background 2s 4s ;
transition-timing-function的效果演示：
使用5个div盒子，设定为relative，并使用过渡效果改变其left
2.6.3. 案例
网页上一张图片在鼠标放上去的时候能够旋转360并放大到1.5倍，此过程在1秒内以过渡方式完成。
如下所示：
2.6.4. 综合案例：芝麻开门
实现如下图所示“手推门开”的动态效果：
2.7. 动画效果animation
2.7.1. 基本概念和语法
动画效果其实可以看着过渡效果的升华版：
过渡效果是实现元素在某个（或某些）属性的两个不同值之间的状态变化效果；
动画效果是预先定义好某个（或某些）属性的多个不同值之间的状态变化效果，并对之命名，而后可多次应用在不同的元素上。
简单说就是：
过渡效果是“实现某元素的某种状态变化效果”，
动画效果是“定义某种状态变化效果，并可拿来用”。
动画效果的基本语法如下：
<style>
/* 定义一个动画 */
@keyframes 动画名{
0% {属性设置。。。} /*表示动画的起始处/*
...... {属性设置。。。} /*这表示还可以设置中间的若干状态*/
100% {属性设置。。。} /*表示动画的结束处/*
}
选择器{
animation：动画名 动画播放设置； /*动画播放设置有若干项控制项*/
}
</style>
说明：
1，可以设置（定义）若干个动画(取不同名称)，后续都可以用在不同的元素上（选择器所决定）；
2，每个动画可以定义若干个关键状态（百分比决定），通常至少需要0%和100%；
3，每个状态可以定义若干个属性值，表示动画播放到该时刻时元素的外观表现；
4，属性的设置跟通常css的属性设置一样，比如：color:red; width:200px; transform:rotate(90deg);
5，动画播放设置中可以设置若干项，比如：持续时间，播放方式，延迟时间，是否循环，等等；
2.7.2. 主要属性
l animation-name：动画名；
l animation-duration：动画持续时间；
l animation-timing-function：动画播放播放方式（效果），也有如下几个常用的效果名：
n linear：线性过渡，就是匀速进行
n ease：平滑过渡，这是默认值
n ease-in：由慢到快。
n ease-out：由快到慢。
n ease-in-out：由慢到快再到慢。
l animation-delay：动画播放前的延迟时间；
l animation-iteration-count：动画播放循环次数，使用数字或infinite（无限）；
l animation-direction：动画播放方向（正向还是反向），可用的值有：
n normal：常规（就是从前往后播放）
n reverse：反向（就是从后往前播放）
n alternate：交替（就是先从前往后，再从后往前），播放次数大于1次才有意义
n alternate-reverse：反向交替（就是先从后往前，再从前往后），播放次数大于1次才有意义
l animation-fill-mode：动画停止（播放结束）时元素停留的状态，可用的值有：
n forwards： 停留在前面（动画播放的结尾处）；
n backwards： 停留在后面（动画播放的开时处）；
n both： 两边都可停（动画停在哪边就哪边）；
l animation-play-state：设置动画启动或暂停，有两个可用的值：
n running： 运行状态（默认值），也就是运行动画效果；
n paused： 暂停状态，也就是动画效果运行中停下来（此时如果需要还可以继续运行）；
l animation：上述属性的综合属性，并依次按该顺序列出（不需要的项直接省略）；
基本示例1：
实现一个盒子的动画效果，要求在3s中盒子背景由红色变换为蓝色，并且2d旋转360度。
基本示例2：
（实现跟上例同样效果，但使用综合属性animation）
对比演示animation-direction：
对比演示animation-fill-mode：
2.7.3. 3D动画案例
实现如下所示的3D动画效果。
该图示实际是由左往右旋转的（动画效果）。
有时间可做：
补充案例1：滑动门效果
补充案例2：手风琴效果