transition 意为过渡。

它可以将属性的变化变得更加平滑。

9-1.transition

基础用法如下：

transition: property duration timing-function delay|initial|inherit;

其中，各属性对应如下：

1. property: transition-property，设置过渡属性。
2. duration: transition-duration，设置过渡持续时间。
3. timing-function: transition-timing-function，设置过渡函数。
4. delay: transition-delay，设置过渡延迟。

transition: all 2s ease;

9-2.transition-property

transition-property 用来定义过渡属性，可以定义一个或多个，多个属性使用逗号分隔。

譬如：

transition: width;

transition: width, height;

此外，该属性也有额外的关键字可供使用，如：

1. none: 不设置属性。则没有属性会有过渡效果。
2. all: 默认值，所有属性都会有过渡效果。

9-3.transition-duration

transition-duration 用来定义过渡持续时间。

其默认值为 0s，所以当省略该属性时，不会有任何过渡效果。

使用方式如下：

transition-duration: 2s;

9-4.transiton-timing-function

transition-timing-function 用来定义过渡函数。

其参数有如下项：

1. esae: 默认值，缓慢。整个过渡过程都是缓慢的。
2. ease-in: 过渡开始时缓慢。
3. ease-out: 过渡结束时缓慢。
4. ease-in-out: 过渡开始时和结束时缓慢。
5. linear: 均速过渡。
6. steps(int, start|end): 默认为 steps(int, end)。
7. step-start: 相当于 steps(1, start)。
8. step-end: 相当于 steps(1, end)。

9-5.transition-delay

transition-delay 用来定义过渡延迟时间。

单位可以设置 s 或者 ms。

transition-delay: 2s;