过渡

1.要产生过渡效果的css属性

transition-property:属性名称；如（width）
注意：多个属性使用逗号隔开，如果嫌麻烦，可以直接写all，表示所有属性,另外过渡对于display没有用。

---

2.要完成过渡的效果的时长

transition-duration:数字+单位;如（5s）
注意：s为秒，ms为毫秒，两者的比例为1s=1000ms。

---

3.速度方式

transition-timing-function:速度方式；
属性如下：

      linear(表示匀速）
      ease (逐渐减速 - 一开始比较快)
      ease-in (逐渐加速)
      ease-out (逐渐减速 - 一开始没有ease快)
      ease-in-out (先加速后减速)
      cubic-bezier(0.735, 1.650, 0.315, -0.600);（贝塞尔曲线）
      steps(步骤数)；（分步骤）

注意：附贝赛尔曲线生成网站
效果大概如下图

---

4.表示延迟多少秒执行过渡效果

transition-delay: 数字s;

---

5.复合写法

transition: 值；
注意：transition的取值：是单一写法的4个值的组合，用空格隔开。第一个秒数表示过渡效果需要使用的时间，第二个秒数表示延迟多长时间后执行。通常情况下，我们在开发当中，只使用复合写法。