Line drawing animation left, down, lef with pure css - html

Question

I'm using css transition to drawing a line, it run or loading from right to left, and then down, and continue to load to left:
point 1------point 2
|
|
|
---------point 3
this is my css:
.transitionLine {
height:0px;
width:1px;
border:10px solid #ef4e4e;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
/*load to left*/
30% {
width: 500px;
}
/*load down*/
60% {
border-radius: 3px;
width: 1000px;
}
/*load to left*/
100% {
border-radius: 3px;
width: 1500px;
}
}
<div class="transitionLine"></div>
my css seem not break line to load down and left, how to fix the problem ?

Answer 1

You can achieve this effect as per my snippet.
I have used Two keyframes and an after property to add bottom line
.transitionLine {
height: 0px;
width: 1px;
border-top: 10px solid #ef4e4e;
border-right: 10px solid #ef4e4e;
position: relative;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
.transitionLine:after {
content: '';
display: block;
height: 0px;
width: 1px;
border-top: 10px solid #ef4e4e;
border-right: 10px solid #ef4e4e;
-webkit-animation: increase2 3s;
-moz-animation: increase2 3s;
-o-animation: increase2 3s;
animation: increase2 3s;
animation-fill-mode: forwards;
position: absolute;
left: 100%;
bottom: 0;
}
#keyframes increase {
/*load to left*/
30% {
width: 200px;
height: 0px;
}
31% {
width: 200px;
height: 1px;
}
/*load down*/
60% {
height: 100px;
width: 200px;
}
/*load to left*/
100% {
height: 100px;
width: 200px;
}
}
#keyframes increase2 {
60% {
height: 0px;
width: 0px;
}
/*load to left*/
100% {
height: 0px;
width: 200px;
}
}
<div class="transitionLine"></div>

Answer 2

You can use gradient to draw lines and you will need only one keyframe:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
0% 5px,
5px 0%,
0% 5px;
background-position:
top left,
top center,
150px 100%;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
30% {
background-size:
50% 5px,
5px 0%,
0% 5px;
}
/*load down*/
60% {
background-size:
50% 5px,
5px 100%,
0% 5px;
}
/*load to left*/
100% {
background-size:
50% 5px,
5px 100%,
50% 5px;
}
}
<div class="transitionLine"></div>
That you can easily scale to any number of lines:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
5px 0%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
background-position:
bottom left,
top left,
top center,
150px 100%,
right bottom;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
20% {
background-size:
5px 100%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
}
40% {
background-size:
5px 100%,
50% 5px,
5px 0%,
0% 5px,
5px 0%;
}
60% {
background-size:
5px 100%,
50% 5px,
5px 100%,
0% 5px,
5px 0%;
}
80% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 0%;
}
100% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 100%;
}
}
<div class="transitionLine"></div>

Answer 3

.transitionLine {
height:0px;
width:1px;
border:10px solid #ef4e4e;
-webkit-animation: increase 1s;
-moz-animation: increase 1s;
-o-animation: increase 1s;
animation: increase 1s;
animation-fill-mode: forwards;
}
.transitionLine:before{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseA 1s;
-moz-animation: increaseA 1s;
-o-animation: increaseA 1s;
animation: increaseA 1s;
animation-fill-mode: forwards;
margin: -10px 0 0 510px;
animation-delay: 1s;
display: inline-block;
opacity: 0;
}
.transitionLine:after{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseB 1s;
-moz-animation: increaseB 1s;
-o-animation: increaseB 1s;
animation: increaseB 1s;
animation-fill-mode: forwards;
margin: 0px 0 0 510px;
animation-delay: 2s;
display: inline-block;
opacity: 0;
}
#keyframes increase {
0% {
width: 0px;
}
100% {
width: 500px;
}
}
#keyframes increaseA {
0% {
height: 0px;
opacity: 1;
}
100% {
height: 500px;
opacity: 1;
}
}
#keyframes increaseB {
0% {
width: 0px;
opacity: 1;
}
100% {
width: 500px;
opacity: 1;
}
}
<div class="transitionLine"></div>