螢幕錄制gif的軟體不好用，就用三張截圖說明動畫效果吧：
我比較喜歡的是他那個邊框描邊的動畫，于是做了整理，提取關鍵代碼如下
結構
1 <ul class="animate">
2 <li>
3 <a href="javascript:;">滑鼠移上來試試</a>
4 </li>
5 <li>
6 <a href="javascript:;">滑鼠移上來試試</a>
7 </li>
8 <li>
9 <a href="javascript:;">滑鼠移上來試試</a>
10 </li>
11 </ul> 樣式
1 .animate li{
2 margin-right: 10px;
3 display: inline-block;
4 }
5 .animate li a{
6 position: relative;
7 color: #9f00ff;
8 text-decoration: none;
9 display: block;
10 padding: 10px 20px;
11 border: 1px solid #dedede;
12 -webkit-transition: all 0.6s ease-in;
13 -moz-transition: all 0.6s ease-in;
14 -ms-transition: all 0.6s ease-in;
15 -o-transition: all 0.6s ease-in;
16 transition: all 0.6s ease-in;
17 }
18 .animate li a:hover{
19 color: #0012ff;
20 border: 1px solid #4488ff;
21 }
22 .animate li a:before,.animate li a:after{
23 content: '';
24 display: block;
25 position: absolute;
26 box-sizing: border-box;
27 border: 1px solid transparent;
28 width: 0;
29 height: 0;
30 }
31 .animate li a:before {
32 bottom: 0;
33 right: 0;
34 -webkit-transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
35 transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
36 }
37 .animate li a:after{
38 top: 0;
39 left: 0;
40 -webkit-transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
41 transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
42 }
43 .animate li a:hover:after,.animate li a:hover:before {
44 width: 100%;
45 height: 100%;
46 }
47 .animate li a:hover:before {
48 border-bottom-color: #367dff;
49 border-left-color: #367dff;
50 -webkit-transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
51 transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
52 }
53 .animate li a:hover:after {
54 border-top-color: #367dff;
55 border-right-color: #367dff;
56 -webkit-transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
57 transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
58 } 從css中看，除了普通的動畫以外，本效果利用動畫的延遲屬性，讓after和befor的寬高邊框顔色依次按序開始執行，就有了我們看到的動畫
并且，after和before的起始位置不同，after在左上角，before在右下角
after先變化，寬度在0.2s内無延遲的從0-100%，0.2s過後，after的高度開始變化，同樣在0.2s以後變化完畢，至此，after的整個已經覆寫完邊框了，
隻不過after：hover時候，隻有border-top和border-right的color被設定了，是以效果上看上去隻有從上邊框到右邊框的描邊效果。
after運動完畢，before開始按照同樣的套路先變寬後變高，隻不過before的起始位置在右下角，且border的顔色隻有bottom和left的，是以他的變化在視覺上看上去就是從有向左描邊下邊框，再從下到上描邊左邊框。
至于border-color 0s ease-out 0.4s這段，是在after的寬高剛好變完後，before的border瞬間變成彩色，然後同時起步的是寬度也開始變化。。。剩下的套路都是上一句的了
于是就看到before的border變了色，也就是邊框的右邊快速變成了藍色。
滑鼠移除後的套路就是這個順序再反過來回去，也就是延遲反過來，按照退出的順序，一個比一個長點。