How to animate vertical lines growing up and down using CSS? - html

Question

I want to create a rectangle and animate the drawing of lines. The lines should grow vertically up and down from the rectangle. Totally, I want to have 2 lines growing up, and 2 lines growing down.
This is my current script:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.vertline {
width: 2px;
margin-left: 10%;
background-color: #dd8341;
top: 40%;
animation:lineup 3s forwards;
position: relative;
}
#keyframes lineup {
0% {
height: 0px;
}
100% {
height: 200px;
}
}
<div class="content"></div>
<div class="vertline"></div>
I cannot align all elements correctly. What is the correct way to do this simple task?

Answer 1

You can do it without additional elements, using the :before and :after pseudo-elements to grow up and down, and background: linear-gradient() to create two lines:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after {
content: "";
width: 6px; /* color white ("no color") color (each 2px wide); here you can adjust the width */
height: 0;
background: linear-gradient(to right, #dd8341, #dd8341 33.33%, #fff 33.33%, #fff 66.66%, #dd8341 66.66%); /* here you can adjust the spacing */
margin-left: 10%;
position: absolute; /* needs to be absolute */
top: 0;
animation: lineup 3s forwards;
}
.content:after {
top: 100%;
animation: linedown 3s forwards;
}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content"></div>
Addition:
/* recommended */
* {box-sizing: border-box}
body {margin: 0}
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after,
.linedown1,
.linedown2 {
content: "";
width: 2px;
height: 0;
background: #dd8341;
left: 20%;
position: absolute;
top: 0;
animation: lineup 3s forwards;
}
.linedown1, .linedown2 {top: 100%; animation: linedown 3s forwards}
.content:after, .linedown2 {left: 80%; animation-delay: 1s}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content">
<span class="linedown1"></span>
<span class="linedown2"></span>
</div>

Answer 2

Here is an idea with only background and gradient:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 10% center,calc(10% + 4px) center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>
UPDATE
To add delay simple add more states to the animation:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 20% center,80% center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
50% {
background-size:100% 40%,2px 100%,2px 0%;
}
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>