title: CSS3 transition affecting other elements
body: <p>I created a simple sidenav for a website that shows and hides itself when clicking the menu icon. I added a transition effect so it will show and hide smoothly. For some weird reason, once I added the trasition, the sidebar's menu text act very funny, it gets bigger and smaller during the transition.</p>
  
  <p><a href="https://codepen.io/paulamourad/pen/rrGVBd" rel="nofollow noreferrer">https://codepen.io/paulamourad/pen/rrGVBd</a></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>/*-- Sidebar --*/
  
  .close {
    width: 0%;
    background-color: green;
  }
  
  .navbar-toggler-icon {
    cursor: pointer;
  }
  
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #1B0088;
    overflow-x: hidden;
    transition: 0.5s;
    /* TRANSITION HERE */
    padding-top: 60px;
    -webkit-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
    box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
  }
  
  .sidenav a {
    white-space: nowrap;
    padding: 4px 8px 4px 20px;
    text-decoration: none;
    font-size: 1em;
    color: #b8b8b8;
    display: block;
    transition: 0.3s;
    /*TRANSITION HERE */
  }
  
  .sidenav a:hover {
    color: #fff;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #b8b8b8;
  }
  
  
  /* Top Navbar */
  
  .navbar-blue,
  .dropdown-menu {
    background-color: #1b0088;
  }
  
  
  /* ::::::::::::::: RESPONSIVE CSS :::::::::::::::::: */
  
  
  /* Mobile Phones (Starting at 576px and less) */
  
  @media (max-width: 576px) {
    .open {
      width: 70%;
    }
  }
  
  
  /* Tablets and Desktop */
  
  @media (min-width: 577px) {
    .open {
      width: 20%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- BOOTSTRAP 4 CDN --&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
    &lt;!-- /BOOTSTRAP 4 CDN --&gt;
  
    &lt;!-- MY CODE --&gt;
    &lt;!-- Top Navbar &amp; Sidebar --&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-blue"&gt;
      &lt;a class="navbar-brand" href="#"&gt;
        &lt;img src="#" alt="Logo"&gt;
      &lt;/a&gt;
      &lt;button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div id="sidenav" class="sidenav"&gt;
        &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
        &lt;a href="#"&gt;Menu 1&lt;/a&gt;
        &lt;hr&gt;
        &lt;a href="#"&gt;Menu 2&lt;/a&gt;
        &lt;hr&gt;
        &lt;a href="#"&gt;Menu 3&lt;/a&gt;
        &lt;hr&gt;
        &lt;a href="#"&gt;Menu 4&lt;/a&gt;
        &lt;hr&gt;
        &lt;a href="#"&gt;Menu 5&lt;/a&gt;
        &lt;hr&gt;
      &lt;/div&gt;
      &lt;div class="top-navbar navbar-dark"&gt;
        &lt;!--span onclick="openNav()"&gt;&amp;#9776;&lt;/span&gt; --&gt;
        &lt;span onclick="openNav()" class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- /Top Navbar &amp; Sidebar --&gt;
  
  
  
  
  
    &lt;!-- Scripts --&gt;
    &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="js/popper.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!-- Sidenav Script --&gt;
    &lt;script&gt;
      function openNav() {
        $('#sidenav').removeClass('close');
        $('#sidenav').addClass('open');
        //  document.getElementById("sidenav open").style.width = "20%";
        $('.sidenav').css('-webkit-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
        $('.sidenav').css('-moz-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
        $('.sidenav').css('box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
      }
  
      function closeNav() {
        $('#sidenav').removeClass('open');
        $('#sidenav').addClass('close');
        $('.sidenav').css('-webkit-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
        $('.sidenav').css('-moz-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
        $('.sidenav').css('box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
      }
    &lt;/script&gt;
  
    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>