How to draw L shaped animation line?-CodePudding

div {
  height: 0px;
  width: 1px;
  border-bottom: 1px solid #000;
  -webkit-animation: increase 3s;
  -moz-animation: increase 3s;
  -o-animation: increase 3s;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

.tt {
  div {
    height: 0px;
    width: 1px;
    border-top: 1px solid #000;
    -webkit-animation: increase 3s;
    -moz-animation: increase 3s;
    -o-animation: increase 3s;
    animation: increase 3s;
    animation-fill-mode: forwards;
  }
}

@keyframes increase {
  100% {
    width: 300px;
  }
}

<div></div>
<div ></div>

How to draw a horizontal and vertical line using css animations. Like "L" alphabet.

At present i am able to draw only vertical line

CodePudding user response：

You can get an L shape drawn with the vertical bit first and then the horizontal bit all in one element by setting the animation to draw the vertical bit for the first 50% of the animation and the horizontal bit for the second 50% of the animation.

Here's a simplified snippet:

div {
  height: 0px;
  width: 1px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-animation: increase 3s;
  -moz-animation: increase 3s;
  -o-animation: increase 3s;
  animation: increase 3s;
  animation-fill-mode: forwards;
}

@keyframes increase {
  50% {
    height: 300px;
    width: 1px;
  }
  100% {
    height: 300px;
    width: 300px;
  }
}

<div></div>