CSS过渡（transition）
CSS里面的过渡（transition）是一种在元素的属性值发生变化时，以平滑的方式从旧值过渡到新值的效果,通过设置过渡属性，可以控制过渡的持续时间、延迟时间、过渡的属性以及过渡的速度曲线。
一、过渡的属性
1.transition-property
检索或设置对象中的参与过渡的属性
（1）取值
- none——不指定过渡的css属性
- all——所有可以进行过渡的css属性
-
指定要进行过渡的css属性
（2）不能执行过渡的属性
-
text-align/text-transfrm/text-decoration -
font-*除font-size外 -
float -
position -
display -
z-index -
visibility -
cursor -
overflow
（3）有过渡效果的属性：
| 属性名称 | 类型 |
|---|---|
| transform | all |
| background-color | color |
| background-image | only gradients |
| background-position | percentage, length |
| border-bottom-color | color |
| border-bottom-width | length |
| border-color | color |
| border-left-color | color |
| border-left-width | length |
| border-right-color | color |
| border-right-width | length |
| border-spacing | length |
| border-top-color | color |
| border-top-width | length |
| border-width | length |
| bottom | length, percentage |
| color | color |
| crop | rectangle |
| font-size | length, percentage |
| font-weight | number |
| grid-* | various |
| height | length, percentage |
| left | length, percentage |
| letter-spacing | length |
| line-height | number, length, percentage |
| margin-bottom | length |
| margin-left | length |
| margin-right | length |
| margin-top | length |
| max-height | length, percentage |
| max-width | length, percentage |
| min-height | length, percentage |
| min-width | length, percentage |
| opacity | number |
| outline-color | color |
| outline-offset | integer |
| outline-width | length |
| padding-bottom | length |
| padding-left | length |
| padding-right | length |
| padding-top | length |
| right | length, percentage |
| text-indent | length, percentage |
| text-shadow | shadow |
| top | length, percentage |
| vertical-align | keywords, length, percentage |
| visibility | visibility |
| width | length, percentage |
| word-spacing | length, percentage |
| z-index | integer |
| zoom | number |
2.transition-duration
检索或设置对象过渡的持续时间
（1）取值
【默认值是0】取值单位是 s（秒） 或者 ms（毫秒）
1秒(s) = 1000毫秒(ms)
3.transition-timing-function
检索或设置对象中过渡的动画类型
(1)取值
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。
4.transition-delay
检索或设置对象延迟过渡的时间
（1）取值
【默认值是0】取值单位是 s（秒） 或者 ms（毫秒）
5.transition
transition是以上四个值的简写形式。
transition: 执行过渡的属性 过渡的时间 [过渡的效果] [过渡的延时];
过渡的注意事项
过渡可以理解成有一个开始的值转变到结束的值。过渡必须有明确的开始值与明确的结束值。
例如：如margin-left:auto这是不可以的，因为auto不是一个明确的值。
二、多个属性的过渡
希望多个样式发生变化以后，都可以执行过渡，只需要使用逗号隔开将多个属性执行的过渡就可以了。
transition-property:属性值1,属性值2....;
transition-duration:属性值1,属性值2....;
transition-timing-function :属性值1,属性值2....;
transition-delay:属性值1,属性值2....;
transition：执行过渡的属性1 过渡的时间1 [过渡的效果1] [过渡的延时1]，执行过渡的属性2 过渡的时间2 [过渡的效果2] [过渡的延时2]....;
三、全属性过渡
transition-property:all;
transition: all 过渡的时间 [过渡的效果] [过渡的延时];
四、非对称性过渡
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非对称性过渡</title>
<style>
/* 鼠标离开 */
.box {
width: 300px;
height: 300px;
background-color: pink;
transition: width 2s 5s, height 5s;
}
/* 鼠标放上去 */
.box:hover {
width: 100px;
height: 100px;
transition: width 3s, height 2s 3s;
}
/*
1.鼠标放上去，width,height都有过渡
2.width过渡3s，height过渡2s
3.height要等width过渡完才开始过渡
4.鼠标离开,width,height都有过渡
5.width过渡2s，height过渡5s
6.先过渡height,width等height过渡完了再开始过渡
*/
</style>
</head>
<body>
<div class="box">非对称性过渡</div>
</body>
</html>