CSS - 박스 테두리 따라 선 흐르는 애니메이션

<style>

.square{position:relative;padding:10px;background:#000;color:#fff;text-align:center}

.square i{position:absolute;text-indent:-9999px;background:rgba(255,255,255,.7)}

.square i.line1{width:2px;height:100%;bottom:0;left:0;animation:line1 5s infinite;-webkit-animation:line1 5s infinite;-moz-animation:line1 5s infinite}

.square i.line2{width:100%;height:2px;top:0;left:0;animation:line2 5s infinite;-webkit-animation:line2 5s infinite;-moz-animation:line2 5s infinite}

.square i.line3{width:2px;height:100%;top:0;right:0;animation:line3 5s infinite;-webkit-animation:line3 5s infinite;-moz-animation:line3 5s infinite}

.square i.line4{width:100%;height:2px;bottom:0;right:0;animation:line4 5s infinite;-webkit-animation:line4 5s infinite;-moz-animation:line4 5s infinite}

 

@keyframes line1 {

0% { height:0; }

25%, 100% { height:100%; }

}

@-webkit-keyframes line1 {

0% { height:0; }

25%, 100% { height:100%; }

}

@-moz-keyframes line1 {

0% { height:0; }

25%, 100% { height:100%; }

}

@keyframes line2 {

0%, 25% { width:0; }

50%, 100% { width:100%; }

}

@-webkit-keyframes line2 {

0%, 25% { width:0; }

50%, 100% { width:100%; }

}

@-moz-keyframes line2 {

0%, 25% { width:0; }

50%, 100% { width:100%; }

}

@keyframes line3 {

0%, 50% { height:0; }

75%, 100% { height:100%; }

}

@-webkit-keyframes line3 {

0%, 50% { height:0; }

75%, 100% { height:100%; }

}

@-moz-keyframes line3 {

0%, 50% { height:0; }

75%, 100% { height:100%; }

}

@keyframes line4 {

0%, 75% { width:0; }

 100% { width:100%; }

}

@-webkit-keyframes line4 {

0%, 75% { width:0; }

 100% { width:100%; }

}

@-moz-keyframes line4 {

0%, 75% { width:0; }

 100% { width:100%; }

}

</style>

 

<a href="#none" class="square">

    BUTTON

    <i class="line1">1</i>

    <i class="line2">2</i>

    <i class="line3">3</i>

    <i class="line4">4</i>

</a>