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

user_9585135 0
Viewed 5418

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?

css-animations css html
2 Answers

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>

user_28516320

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>

user_86203330
Related