CSS transition not working for first time

Question

I am trying to create a right sidebar, where there is a Open button to open the sidebar and a cancel button. When open button clicked a sidebar will slide to left along with 3 section. sections will also slide to left and make a free space for the sidebar and when cancel button is clicked everything will be normal again but CSS transition is not working for the first time I load the website. I used

transition: all 0.3s;

property but still after first time CSS transition works every time. What should I do now, Please help me to solve the issue

function openNav() {
  document.getElementById("mySidebar").style.marginRight = "0";
  document.getElementById("header").style.marginLeft = "-300px";
  document.getElementById("header-slider").style.marginLeft = "-300px";
}

function closeNav() {
  document.getElementById("mySidebar").style.marginRight = "-300px";
  document.getElementById("header").style.marginLeft = "0";
  document.getElementById("header-slider").style.marginLeft = "0";
}

.sidebar {
  height: 100%;
  width: 300px;
  margin-right: -300px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: var(--second-color);
  overflow-x: hidden;
  transition: all 0.3s;
}

.sidebar img {
  width: 80%;
  height: auto;
  margin: 30px;
  margin-top: 100px;
}

.sidebar a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar p {
  margin: 30px;
  font-family: Arial;
  font-size: 16px;
  font-weight: 200;
  line-height: 1.8;
  color: var(--white-color);
  display: block;
  transition: 0.3s;
}

.sidebar a.closebtn:hover {
  color: var(--main-color);
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 50px;
}

.openbtn {
  font-size: 23px;
  cursor: pointer;
  color: white;
  background: var(--second-color);
  border: none;
  float: right;
}

.openbtn:hover {
  color: var(--main-color);
}

.openbtn:focus {
  color: var(--main-color);
}

#main {
  transition: margin-right .3s;
  float: right;
}

<div id="header">  
 <div class="collaps">
      <div id="mySidebar" class="sidebar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <img src="assets/images/side-area.png" alt="">
        <p class="text-justify">Legimus intellegam ea est, tamquam appellantur nec ei. Dicant perfecto deserunt quo id, ea etiam impetus pri. Mel ne vidit laboramus definiebas, quo esse aeterno</p>
      </div>

      <div id="main">
        <button class="openbtn" onclick="openNav()">☰</button>
      </div>
    </div>
</div>

<div id="header-slider"></div>

Answer 1

I think you are using a browser other than Google Chrome

and if you use other browsers then you should add this line of code before your transition

-webkit-transition: all 0.3s;

Answer 2

I made a few changes to your code and added comments in the code for the lines that I changed or added.

• First, in your HTML file, I added an ID to the button.
• Second, in your CSS file, I removed color: white from the .openbtn class
• And third, I added two lines to your JS file (see comments in code)

function openNav() {
  document.getElementById("mySidebar").style.marginRight = "0";
  document.getElementById("header").style.marginLeft = "-300px";
  document.getElementById("header-slider").style.marginLeft = "-300px";
  document.getElementById("header-slider").style.marginLeft = "-300px";
  
  // Add this line
  document.getElementById("openbtn").style.display = "none";
}

function closeNav() {
  document.getElementById("mySidebar").style.marginRight = "-300px";
  document.getElementById("header").style.marginLeft = "0";
  document.getElementById("header-slider").style.marginLeft = "0";
  
  // Add this line
  document.getElementById("openbtn").style.display = "block";
}

.sidebar {
  height: 100%;
  width: 300px;
  margin-right: -300px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: var(--second-color);
  overflow-x: hidden;
  transition: all 0.3s;
}

.sidebar img {
  width: 80%;
  height: auto;
  margin: 30px;
  margin-top: 100px;
}

.sidebar a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar p {
  margin: 30px;
  font-family: Arial;
  font-size: 16px;
  font-weight: 200;
  line-height: 1.8;
  color: var(--white-color);
  display: block;
  transition: 0.3s;
}

.sidebar a.closebtn:hover {
  color: var(--main-color);
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 50px;
}

.openbtn {
  font-size: 23px;
  cursor: pointer;
/*  Comment out this line */
/*   color: white; */
  background: var(--second-color);
  border: none;
  float: right;
}

.openbtn:hover {
  color: var(--main-color);
}

.openbtn:focus {
  color: var(--main-color);
}

#main {
  transition: margin-right .3s;
  float: right;
}

<div id="header">  
 <div class="collaps">
      <div id="mySidebar" class="sidebar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <img src="assets/images/side-area.png" alt="">
        <p class="text-justify">Legimus intellegam ea est, tamquam appellantur nec ei. Dicant perfecto deserunt quo id, ea etiam impetus pri. Mel ne vidit laboramus definiebas, quo esse aeterno</p>
      </div>

      <div id="main">
        <!-- Add an ID to the button -->
        <button id="openbtn" class="openbtn" onclick="openNav()">☰</button>
      </div>
    </div>
</div>

<div id="header-slider"></div>