在CSS3中为了可以将元素从一种样式在指定的时间内平滑的过渡到另外一种样式，可以说是简单的动画，这种就是CSS3中的过渡，它不需要javaScript就可以实现。
过渡的5个相关属性
- transition-property:设置元素中参与过渡的属性
- transition-duration:设置过渡的持续时间
- transition-timing-function:设置元素过渡的动画类型
- transition-delay:设置过渡效果延迟的时间，默认是0
- transition:简写属性，用于同时设置上面的4个过渡属性
1、transition-property
transition-property属性用来设置参与过渡的属性名称，例如width,height等等，用法如下
transition-property:none | all | property
- none:没有属性参与过渡效果
- all : 所有的属性都参与过渡效果
- property: 指定要参与应用过渡效果的css属性名称列表，多个属性通过逗号隔开
例子:设置div的过渡属性为长度和宽度
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
transition-property: width,height;
}
div:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、transition-duration
transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒），语法格式如下：
transiton-duration:time;
time为过渡需要花费的时间，默认值为0，表示不设置就没有效果；
如果有多个参与过渡的属性，也可以依次为这些属性设置过渡需要的时间，多个属性之间使用逗号进行分隔，例如transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一个时间来为所有参与过渡的属性设置过渡所需的时间。示例代码如下：
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition-property: width, height;
transition-duration: .25s, 1s;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
3、transition-timing-function
用来设置过渡动画的类型，让过渡效果更加的丝滑，主要有一下属性值：
| 值 | 描述 |
|---|---|
| linear | 以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1),即匀速 |
| ease | 以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1)，即慢-快-慢 |
| ease-in | 以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1) |
| ease-out | 以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1) |
| ease-in-out | 以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1) |
| cubic-bezier(n, n, n, n) | 使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间 |
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition-property: width, height;
transition-duration: .25s, 1s;
transition-timing-function: ease;
}
div:hover {
width: 200px;
height: 200px;
}
4、transition-delay
transition-delay 属性用来设置过渡效果何时开始,单位为秒或毫秒。，属性的语法格式如下：
transition-delay: time;
time为过渡开始前所要等待的时间；
例子如下：
<style>
div {
width: 100px;
height: 100px;
transition-property: width, background;
transition-duration: .25s, 1s;
transition-delay: 3s; //延迟3s后执行
}
div:hover {
width: 200px;
background-color: blue;
}
</style>
5、 transition
transition 属性是上面四个属性的简写形式，通过该属性可以同时设置上面的四个属性，属性的语法格式如下：
transition: transition-property transition-duration transition-timing-function transition-delay;
transition 属性中，transition-property 和 transition-duration 为必填参数，transition-timing-function 和 transition-delay 为选填参数，如非必要可以省略不写。另外，通过 transition 属性也可以设置多组过渡效果，每组之间使用逗号进行分隔，示例代码如下：
<style>
div {
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
//上面这句话和下面这4行代码是一个意思，效果一样，只是上面的为简写形式
transition-property: width, background, transform;
transition-duration: .25s, 1s, 2s;
transition-timing-function: linear, ease, ease;
transition-delay: 1.9s, 2s, 0s;
}
div:hover {
width: 200px;
background-color: blue;
transform: rotate(180deg);
}
</style>
6、贝塞尔曲线(cubic-bezier)
cubic-bezier又称三次贝塞尔曲线，这是一个函数，可以生成速度曲线。
贝塞尔曲线主要用于transition（过渡效果）和animation（动画效果）。其对应的属性为：transition-timing-function、animation-timing-function。 在线贝塞尔调试工具
cubic-bezier(0,0,1,1) ✿ cubic-bezier.com
Ceaser - CSS Easing Animation Tool - Matthew Lein (xuanfengge.com)
cubic-bezier(x1, y1, x2, y2)
主要有四个参数，其中坐标(x1,y1)表示控制点1的坐标，坐标(x2,y2)表示控制点2的坐标。
需要关注的是P1和P2两点的取值，而其中x轴的取值范围是0到1。当取值超出范围时cubic-bezier将失效；Y轴的取值没有规定。
标准的cubic-bezier()函数值的取值范围是0～1，超出1时，可以实现回弹效果
