Border animation CSS - css

Question

I am facing a bit of a problem and I cant seem to figure it out. The ultimate outcome I am looking for, when the box is hovered, the borders should animate to make a frame that looks like this. - image attached
But the actual outcome I am getting is different. The border don't make a perfect frame. This is my code.
<section class="services">
<div class="grid">
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="900" y2="0"></line>
<line class="left" x1="0" y1="260" x2="0" y2="-520"></line>
<line class="bottom" x1="300" y1="260" x2="-600" y2="260"></line>
<line class="right" x1="300" y1="0" x2="300" y2="780"></line>
</svg>
<div class="icon-wrapper"><i class="fa fa-users custom-icon"><span class="fix-editor"> </span></i></div>
<p>text</p>
</div>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="900" y2="0"></line>
<line class="left" x1="0" y1="460" x2="0" y2="-920"></line>
<line class="bottom" x1="300" y1="460" x2="-600" y2="460"></line>
<line class="right" x1="300" y1="0" x2="300" y2="1380"></line>
</svg>
<h3>text</h3>
</div>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="900" y2="0"></line>
<line class="left" x1="0" y1="460" x2="0" y2="-920"></line>
<line class="bottom" x1="300" y1="460" x2="-600" y2="460"></line>
<line class="right" x1="300" y1="0" x2="300" y2="1380"></line>
</svg>
<h3>text</h3>
</div>
</div><!-- /grid -->
</section>
This is the css
html {background:blue;}
.box {
width: 300px;
height:260px;
position: relative;
background: rgba(255,255,255,1);
display: inline-block;
margin: 0 10px;
cursor: pointer;
color: #2c3e50;
box-shadow: inset 0 0 0 3px #2c3e50;
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s;
}
.box:hover {
background: rgba(255,255,255,0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.box svg {
position: absolute;
top: 0;
left: 0;
}
.box svg line {
stroke-width: 3;
stroke: #ecf0f1;
fill: none;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.box:hover svg line {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.box svg line.top,
.box svg line.bottom {
stroke-dasharray: 330 240;
}
.box svg line.left,
.box svg line.right {
stroke-dasharray: 490 400;
}
.box:hover svg line.top {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
.box:hover svg line.bottom {
-webkit-transform: translateX(600px);
transform: translateX(600px);
}
.box:hover svg line.left {
-webkit-transform: translateY(520px);
transform: translateY(520px);
}
.box:hover svg line.right {
-webkit-transform: translateY(-520px);
transform: translateY(-520px);
}
.services {text-align: center;}
/* Frame */
.services .box {
background: rgba(0,0,0,0);
color: #fff;
box-shadow: none;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.services .box:hover {
background: rgba(0,0,0,0.4);
}
.services .box svg line {
-webkit-transition: all .5s;
transition: all .5s;
}
.services .box:hover svg line {
stroke-width: 10;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.services .box:hover svg line.top {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
.services .box:hover svg line.bottom {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
.services .box:hover svg line.left {
-webkit-transform: translateY(260px);
transform: translateY(260px);
}
.services .box:hover svg line.right {
-webkit-transform: translateY(-260px);
transform: translateY(-260px);
}
And this is a fiddle

Answer 1

Your values for this:
.box svg line.left,
.box svg line.right {
stroke-dasharray:
}
Were causing an error for the first box. Try these numbers:
.box svg line.left,
.box svg line.right {
stroke-dasharray: 290 200;
}
Fiddle
You should be able to tweak these values for the remaining boxes as you need.