过渡 - transition

过渡就是元素的属性发生变化时切换的方式。

通过过渡可以创建一些非常好的效果，提升用户的体验。

属性

transition-property：要执行的属性，多个属性用逗号隔开，如果需要指定所有属性可以使用all

transition-duration：过渡效果持续的时间，时间单位（s 和 ms)

transition-timing-function：过渡的时序函数，指定过渡的执行方式

- 默认值：ease：先加速，在减速
- linear：线性效果：匀速运动
- ease-in：加速运动（开始慢，后面快）
- ease-out：减速运动
- ease-in-out：先加速后减速
- `cubic-bezier()`：贝塞尔曲线（https://cubic-bezier.com/）
- `steps()`：分步执行过渡效果，参数（步数，一个时间单位开始执行，一个时间单位结束执行）

transition-delay：等待一段时间后再执行过渡。

有效属性

大部分的属性都可以过渡，只要是可以计算的值都可以过渡，width，left，color等等

注意过渡时，必须是从一个有效数值过渡到另一个有限制。

简写

transition

可以同时设置过渡的所有属性，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间。

transition: all ease-out .3s;