在CSS中为对角线设置动画

Question

我想创建一个动画，该动画使对角线从width：0增长到width：400px，并且从左（左下）到右（右上）开始。我知道如何执行此操作，但是使用水平线（关键帧为0％{width：0px;} 100％{width：400px;}），但是在开始时要将其转换为对角线动画的位置也会改变。有任何想法吗？谢谢！

Answer 1

您可以尝试以下方法：

.line {
  height:10px;
  width:0;
  margin-top:100px;
  background:red;
  transform:rotate(-45deg);
  transform-origin:left;
  animation:grow 1s linear forwards;
}
@keyframes grow{
  to {width:100px;}
}

<div class="line"></div>