title: How to make the top of line go to the side of the border?
body: <p>I'm trying to make the line fall down in the left side of border of the box but I don't get what's wrong.</p>
  <p>Here is the sample</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>       @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;family=Grey+Qo&amp;family=Jost:wght@100&amp;family=Loved+by+the+King&amp;family=Luckiest+Guy&amp;family=Lusitana&amp;family=Medula+One&amp;family=Michroma&amp;family=Petrona:wght@200&amp;family=Philosopher&amp;family=Ranga&amp;display=swap');
          *,*::after,*::before {
              padding: 0;
              margin: 0;
          }
          :root {
              --rotation-xy:0deg;
          }
          .container {
              width: 100%;
              height: 100vh;
              position: relative;
              background: #000;
              overflow: hidden;
              
              display: flex;
              align-items: center;
              justify-content: center;
  
          }
  
          .box {
              width: 200px;
              height: 200px;
              /* background: yellow; */
              border: 2px solid yellow;
              border-top: 0px;
              position: relative;
          }
  
          .line {
              width: 100%;
              height: 2px;
              top: 0;
              left: 0;
              transform: rotate(0deg);
              z-index: 10;
              background: red;
              position: absolute;
              animation: anim 6s ease-in-out forwards;
          }
  
          @keyframes anim {
              100% {
                  transform: rotate(90deg) translate(-50%,-50%);
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="container"&gt;
  
          &lt;div class="box"&gt;
              &lt;div class="line"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I expect it to be like this. I search something related to it like a clock rotating on whatsoever or quarter circle rotating line but its not the same as I wanted to happen.
  <a href="https://i.stack.imgur.com/kyvt1.png" rel="nofollow noreferrer">IMAGE HERE</a></p>