2.3 过渡属性transtion（重点）

这个属性我们之前在仿写 米哈游官网导航栏里的图标时就见过了，现在我们系统的学习一下这个颠覆性的动画属性。

取值

transition中可以为同一元素的多个属性定义过渡效果。不同的效果之间以逗号隔开，示例：

transition:
   border-color .5s ease-in .1s,
   background-color .5s ease-in .1s,
   color .5s ease-in .1s;

如果想简单的让所有属性都过渡，只需要写一个all即可。

transition: all .5s ease .1s

其中运动曲线属性可选的类型有：

运动曲线属性取值：

linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease（默认）：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps([, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

细节注意点

过渡属性经常和 :hover 配合，但是 transition 是写在元素本身的样式里呢？还是写在 :hover伪类里呢？
记住这个口诀：谁要变化给谁加~ 也就是说transition是直接写在要过渡的元素本身的样式里的，:hover里只写过度后的样式。
以下以仿写米哈游官网导航图标为例：

    .bh3 {
      display: inline-block;
      width: 140px;
      height: 140px;
      margin-bottom: 50px;
      padding: 4px;
      text-align: center;
      border-radius: 0.6rem;
      /* 这里需要预设一个透明的边框，不然在hover中添加边框时会因为额外多出了边框的像素而造成页面塌陷 */
      border: 4px solid transparent;
      /* 设置过渡元素和过渡时间，transition直接写在元素本身的样式里 */
      transition: border 300ms;
      /* 修改鼠标(游标)指针的样式为手指 */
      cursor: pointer;
    }

    .bh3:hover {
      /* 这里设置的borde必须与父亲中的border宽度一样，才不会出现塌陷 */
      border: 4px solid #3778e5;
    }