前言
大家好，我是cv竹叶，我一直对：transition过度、animation动画、transform变换，这些属性摸不着头脑，就像是对初恋一样让人迷惑。
今天，我要用3分钟，就理解其中的transition过度属性！
transition
该属性，用于在一定的时间区间内css进行平滑地过渡，像这样子：
可以看到，鼠标移动上去之后，可以看到背景颜色从红变蓝，高度也变更高了，这就是transition过度。
也就是说，当页面里面的样式在改变时，加了transition属性，就会产生过度效果！
transition属性参数
transition包含四个参数值，用法样板：transition: width 1s ease 0.1s
- transition-property（执行变换的属性）：
-
none 没有属性需要执行过渡。 -
all 所有属性发生变化（默认值）。 -
indent 元素的某一个css属性值，如：width、height。
-
- transition-duration（执行变换的持续时间）
-
用来指定元素过度过程的持续时间，可选单位为s或ms。默认值为0。
-
- transition-timing-function (变换的速率变化模式)
-
用来根据时间的推进，去改变属性值的变换速率。速率有以下这些参数值：- ease（逐渐变慢）
- linear（匀速）
- ease-in（加速）
- ease-out（减速）
- ease-in-out（加速然后减速）
-
- transition-delay (变换延迟时间)
-
用来指定动画开始延迟的时间，也就多少秒后执行动画。
-
transition属性，可以分不同的css属性值，进行不同的过度，只需要','号隔开就好！
举个板栗：
/* 分别单独指定过度效果 */
transition: background-color 1s ease 0.1s,height 1s ease-in-out 0.1s;
/* 指定全部过度效果都一样 */
transition: all 3s;
/* 样式例子 */
.box {
background: red;
width: 100px;
margin: auto;
height: 100px;
color: #fff;
transition: background-color 1s ease 0.1s,height 1s ease-in-out 0.1s;
}
.box3:hover{
background: blue;
height: 150px;
}
/* 页面 */
<div class="box">cv竹叶</div>
transition兼容性
根据canius，可以知道兼容性，ie10以下是不支持的
总结
灵活运用transition过度属性，可以让你的页面不再死板僵硬，多一份色彩。帮我看下时间，3分钟到了嘛，到了的话，帮我点个赞吧！
