CODEWITHSUNDEEP
csssvg
Rayan Sp
Rayan Sp

Reputation: 1020

Border animation CSS

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 attachedenter image description here

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">&nbsp;</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

Upvotes: 0

Views: 977

Answers (1)

sol
sol

Reputation: 22919

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.

Upvotes: 2

Related Questions