用css实现的边框动画

css代码：

 .box2 {
            width: 100px;
            height: 50px;
            margin: 100px auto;
            text-align: center;
            line-height: 50px;
            background: #cccccc;
            cursor: pointer;
            position: relative;
        }
        .box2:after,.box2:before {
            content: '';
            display: block;
            position: absolute;
            border: 1px transparent solid;
            width: 0;
            height: 0;
            box-sizing: border-box;
        }
        .box2:after {
            left: 0;
            top: 0;
            transition:border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
        }
        .box2:before {
            right: 0;
            bottom: 0;
            transition:border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in 0s;
        }
        .box2:hover:after,.box2:hover:before {
            height:100%;
            width:100%;
        }
        .box2:hover:after {
            border-right-color:#367dff;
            border-top-color:#367dff;
            transition:width 0.2s ease-out 0s,height 0.2s ease-out 0.2s;
        }
        .box2:hover:before {
            border-left-color:#367dff;
            border-bottom-color:#367dff;
            transition:border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
        }
        .box  {
            width: 100px;
            height: 100px;
            border: 1px red solid;
            transition: all 1s;
        }
        .box:hover {
            width: 50px;
            height: 50px;
        }

html代码：

<div class="box"></div>
<div class="box2">边框动画</div>