title: Side menu transform animations is not working properly when the hamburger menu is clicked
body: <p>I am trying to create a side menu, and to achieve that I was using <code>left: -100%</code> and then when the hamburger button is pressed it animates to <code>left: 0%</code> but I came to know that this is not very efficient way. So I switched to <code>transform: translateX(-100%)</code>. But it is not working as expected. Here is a screenshots.</p>
  <p><a href="https://i.stack.imgur.com/TE6vG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TE6vG.jpg" alt="enter image description here" /></a></p>
  <p><strong>CSS Code</strong></p>
  <pre><code>.nav-text-links-content {
      position: absolute;
      display: flex;
      gap: 20px;
      flex-direction: column;
      width: 100%;
      height: 85vh;
      top: 5rem;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      /* left: -100%; */
      opacity: 0;
      transition: transform 300ms linear;
    }
  </code></pre>
  <p>Here is the link for the full project <a href="https://codesandbox.io/s/mutable-hooks-2dcdj?file=/src/components/Nav.css" rel="nofollow noreferrer">codesandbox</a></p>