How to get this using css3? - css

Question

I want this animation in my fontAwesome icon's border. I have tried a lot but failed.
Here is the animation.
http://postimg.org/image/8k3al48kr/

Answer 1

I don't think it's possible to do it with only one HTML element but the following should work:
.square {
display: block;
width: 100px;
height: 100px;
position: relative;
}
.left, .top, .right, .bottom {
position: absolute;
width: 0px;
height: 0px;
background-color: black;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-o-animation-duration: 1s;
-o-animation-fill-mode: forwards;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
.left, .right {
-moz-animation-name: drawVertical;
-webkit-animation-name: drawVertical;
-o-animation-name: drawVertical;
animation-name: drawVertical;
width: 1px;
}
.top, .bottom {
-moz-animation-name: drawHorizontal;
-webkit-animation-name: drawHorizontal;
-o-animation-name: drawHorizontal;
animation-name: drawHorizontal;
height: 1px;
}
.left {
left: 0;
bottom: 0;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-moz-animation-delay: 0s;
}
.top {
top: 0;
left: 0;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.right {
right: 0;
top: 0;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.bottom {
bottom: 0;
right: 0;
height: 1px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
#keyframes drawHorizontal {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes drawVertical {
from {
height: 0;
}
to {
height: 100%;
}
}
<div class="square">
<span class="left"></span>
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
</div>