CSS transition not working on mobile menu

I'm trying to transition the margin-left property of the mobile menu when the menu icon is clicked, but it's not working. The menu is displaying fine, the only issue is the transition not working. I've already read others questions about this topic but I still don't know what I'm doing wrong. If someone can help me understand what is wrong, I appreciate it.

HTML

<div class="nav-container">
<nav class="main-nav">
    <div class="main-nav__logo"><a href="#">Dógui</a></div>
    <div class="main-nav__navbar">
        <i class="fas fa-bars"></i>
        <div class="navbar__mobile__bg">
            <ul class="navbar__mobile">
                <div class="navbar__mobile__logo">Dógui</div>
                <li class="close-button">&times;</li>
                <li class="navbar__mobile__item"><a href="#">About Us</a></li>
                <li class="navbar__mobile__item"><a href="#">Services</a></li>
                <li class="navbar__mobile__item"><a href="#">Team</a></li>
                <li class="navbar__mobile__item"><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
</div>

CSS

.navbar__mobile__logo {
  font-family: 'Aladin';
  font-size: 2.5rem;
  color: #edb306;
  position: absolute;
  top: 10px;
  left: 32px;
}

.navbar__mobile__bg {
  background-color: rgba(0,0,0,.6);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}

.navbar__mobile {
  display: none;
  color: #444;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  height: 100%;
  width: 300px;
  opacity: .95;
  padding-top: 5rem;
  font-size: 1.2rem;
  padding-left: 2rem;
  margin-left: -300px;
  transition: margin-left 1s;
}

.navbar__mobile__item {
  padding: 1.2rem 0 1.2rem 0;
}

.close-button {
  cursor: pointer;
  position: absolute;
  font-size: 2.5rem;
  padding-right: 1rem;
  color: #edb306;
  top: 10px;
  right: 0;
}

Javascript

//selecting elements
let openButton = document.querySelector('.fa-bars');
let closeButton = document.querySelector('.close-button');
let navbarMobile = document.querySelector('.navbar__mobile');

//open menu
openButton.addEventListener('click', openMenu);

//close menu
closeButton.addEventListener('click', closeMenu);

//defining the functions
function openMenu(){
  document.querySelector('.navbar__mobile__bg').style.display = 'block';
  navbarMobile.style.display = 'block';
  navbarMobile.style.marginLeft = '0';
}
function closeMenu(){
  document.querySelector('.navbar__mobile__bg').style.display = 'none';
  navbarMobile.style.display = 'none';
  navbarMobile.style.marginLeft = '-300px';
}

I would like the transition to slide from the left side. I am using margin-left for this, but it's not working. I've tried using translateX, also not working.

Thank you.