拖了两天的更新诶，懈怠了懈怠了
transition蛮好玩的，可以实现由一个状态像另一个状态的动画过渡，无缝斜街的感觉，不多说啦，开始介绍属性吧~
1.transition可以传4 / (4n)个参数，（4n是因为它可以对不同的属性分别加过渡效果）
第一位：设置参与过渡的属性
第二位：过渡的时间
第三位：过渡的动画类型（选填，默认ease）
第四位：开始过渡的延时（选填，默认0）
这里给个【例1】，为了知识点一目了然放后面啦
第二位和第四位填时间就好啦，接下来详细介绍一下第一位和第三位
2.第一位属性值
第一位通常填all，如【例1】，检测到所有的属性过渡，也可以分别填写某个属性【例2-1】，或者某几个属性【例2-2】
3.第三位属性值
通常有ease【例2-2】，linear【例2-1】，ease-in，ease-out，ease-in-out等，不过实质上是贝塞尔曲线，即可填cubic-bezier(num,num,num,num)【例3-1】该属性值去自定义设置过渡的动画类型
贝塞尔曲线我在下一节详细介绍，下面给例子吧
【例1】给hover添加过渡的效果，如下
代码
<!DOCTYPE html><html lang="en"><head><style>div {width: 100px;height: 100px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: all 2s linear 0.5s; }div:hover {width: 120px;height: 120px;background-color: #88f;top: 100px;left: 100px;opacity: 1;}</style></head><body><div></div></body></html>
【例2-1】只给颜色添加过渡的效果，如下
代码 ：修改【例1】代码的样式部分
div {width: 100px;height: 100px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: background-color 2s linear 0.5s; }div:hover {width: 120px;height: 120px;background-color: #88f;opacity: 1;}
【例2-2】给宽度和高度设置不同的过渡效果，如下
代码：修改【例2-1】div的transition属性如下
div {width: 100px;height: 100px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: width 2s linear 1s, height 4s ease 3s ; }
【例3-1】贝塞尔曲线
代码
<!DOCTYPE html><html lang="en"><head><style>div {width: 100px;height: 50px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: all 1s cubic-bezier(0,0,1,1); }div:hover {width: 200px;background-color: #88f;opacity: 1;}</style></head><body><div></div></body></html>
效果
可以看出来，它是线性变化，此时的 s - t 图如下
transition还有step-start，step-end，steps()，几个属性，animation也有，后续放在animation中讲
