'Side menu transform animations is not working properly when the hamburger menu is clicked

I am trying to create a side menu, and to achieve that I was using left: -100% and then when the hamburger button is pressed it animates to left: 0% but I came to know that this is not very efficient way. So I switched to transform: translateX(-100%). But it is not working as expected. Here is a screenshots.

enter image description here

CSS 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;
  }

Here is the link for the full project codesandbox

cssreactjstransform


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions