在css中为对角线设置动画答案

【问题标题】：animate a diagonal line in css在css中为对角线设置动画
【发布时间】：2019-02-23 00:41:38
【问题描述】：

我想创建一个动画，使对角线从宽度：0 到宽度：400 像素，并从左（左下）到右（右上）开始。我知道如何做到这一点，但是使用一条水平线（带有关键帧，0% { width:0px; } 100% { width:400px; } ），但是在将这条线转换为对角线时，一开始的动画，它也改变了它的位置。有任何想法吗？谢谢！

【问题讨论】：

将线旋转成对角线
我知道如何旋转线条（ transform: rotate(Xdeg); ），但在动画开始时它也会改变它的位置

标签： css animation

【解决方案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;}
}

&lt;div class="line"&gt;&lt;/div&gt;

【讨论】：