transition: property duration timing-function delay;

transition主要包含四個屬性值：執行變換的屬性transition-property，變換延續的時間transition-duration，

在延續的時間段內，變換的速率變化transition-timing-function，變換延遲時間transition-delay。

頁面僅需：

<div class="div1"></div>

接下來就是重點啦：css3來了

.div1{position: relative;width:100px;height:100px;}
.div1:before,.div1:after{content:"";display:block;width: 0;height:0;border:2px solid transparent;box-sizing: border-box;position: absolute;}

.div1:before{top:0;left:0;transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;}
.div1:after{right:0;bottom:0;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in ;}

.div1:hover:before{width:100%;height:100%;transition:width 0.2s ease-in ,height 0.2s ease-in 0.2s;border-top-color:#ff5b00;border-right-color:#ff5b00;}
.div1:hover:after{width:100%;height:100%;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.4s,height 0.3s ease-in 0.6s;border-bottom-color:#ff5b00;border-left-color:#ff5b00;}
 

第一行不解釋了；

第二行：給偽元素before、after一個塊屬性，並設border透明。

第三行：給偽元素before一個左上的定位；並設border顏色的變化時間為0，從0.8s開始變色（其實就是0.8s是，border變色了，變成透明）；寬度從0.6s開始，執行0.2s，由100%變為0；高度從0.4s開始；執行0.2s；由100%變為0；這裡的效果其實是滑鼠離開時的效果，也就是邊框線消失的動畫過程

第四行：同第三行；

第五行：這裡是滑鼠劃上時的效果過程啦！！！

首先設寬高為100%；然後邊框顏色（這裡選擇top、right兩條邊），

最重要的就是通過transition來設定動畫過程啦，

width 0.2s ease-in ,
 

這裡就是寬度從0s開始，由0到100%；然後高從0.2s開始由0到100%；

下面同理；一個漂亮的邊框動畫效果就出來啦！

沒圖，這麼說都沒用，來！看圖

不會p圖，手動捂臉