tips：瀏覽器自身為主動，需要我們去觸發才能運行的動畫為被動

可以與:hover或者:checked結合

可以通過設置.box和.box:hover實現慢開快回、快開慢回等效果

.box{
     width: 100px;
     height: 100px;
     background-color: red;
     transition: all 1s;
}
.box:hover{
     width: 500px;
     transition: all;
}

<div class="box"></div>

鼠標未懸浮

鼠標懸浮（當鼠標移開之后，會在1s內緩慢恢復到未懸浮的大小）

一、復合屬性transition

transition：屬性名? 時間? 貝塞爾曲線? 延時

.box1{
      width: 100px;
      height: 100px;
      margin-top: 10px;
      background-color: red;
      /*transition：屬性名? 時間? 貝塞爾曲線? 延時*/
      transition: all 4s ease -2s;
      position: relative;
      left: 0;
}
body:hover .box1{
      left: 1000px;
}

<div class="box1">box1</div>

?

1、transition-property:屬性名

transition-property:all;元素的所有屬性都會有動畫效果；（例如：width、height、left、right等）

2、transition-duration:時間

元素在一定時間內發生變化?

transition-duration:1s;

3、transition-delay:延時

元素經過該時間后再生效動畫樣式（可以取負值，負值會加快動畫時間）

正數延時，負數加快

transition-delay:1s;

4、transition-timing-function: 貝塞爾曲線

元素動畫運動的軌跡

?

先慢 再快 再慢

transition-timing-function: ease;

勻速運動

transition-timing-function: linear;

勻加速運動

transition-timing-function: ease-in;

勻減速運動

transition-timing-function: ease-out;

?加速、減速

transition-timing-function: ease-in-out;

x軸：時間

y軸：距離

貝塞爾曲線網址：cubic-bezier.com

transition-timing-function: cubic-bezier(.17,.67,.83,.67);

?