cssでその場から動かない斜線のアニメーションを作りたい

Question

cssで簡易的な斜線のアニメーションを作ったんですが、斜めに広がるときにその場にとどまらず上に上がってしまい困っています。

body{
  margin: 0;
}
div {
  width: 300px;
  height: 1px;
}

.gradient3 {
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  background: #000;
  display: inline-block;
  animation-fill-mode: forwards;
  animation-name: wide-scale;
  animation-duration: 3s;
  transform: rotate(10deg);
  
}
@keyframes wide-scale{
  from{
    width: 0;
  }
  to{
    width: 100%;
  }
}

<div class="gradient3"></div>

横に広がる分には思った通りになるのですが、rotateを加えると上にあがるみたいです。
よろしくお願いします。

Answer 1

transform-origin で回転の原点を指定することができます。
https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin

質問では見かけ上線が上に上がってほしくない、原点が左上で線が右下へまっすく引かれるようなアニメーションにしたいと読み取れます。
その場合は、transform-origin: top left;で回転の原点を左上隅にセットすることで左上の位置は固定できます。