L形动画线怎么画？

Question

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 class="tt"></div>

如何使用 css 动画绘制水平线和垂直线。像“L”字母表。

目前只能画竖线

Answer 1

通过将动画设置为动画的前 50% 绘制垂直位，第二个绘制水平位，您可以在一个元素中先绘制垂直位，然后绘制水平位的 L 形50% 的动画。

这是一个简化的片段：

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>

L形动画线怎么画？

How to draw L shaped animation line?

css

animation