title: Choppy / glitchy CSS animations with toggleClass
body: <p>I'm wondering if there are any ways in which I can optimise the CSS animations on my website. I have two buttons in my header that activate a toggleClass animation on either side of the page, bringing out a sliding menu that pushes the rest of the page with it.</p>
  
  <p>Here's an example: <a href="https://jsfiddle.net/8nj5y4t1/62/" rel="nofollow">https://jsfiddle.net/8nj5y4t1/62/</a></p>
  
  <p>I have noticed that whilst sometimes they're really smooth, they also sometimes seem to move in a jerky/glitchy movement. This happens most in Safari. I've just got a new macbook with maxed out specs, and this is still happening, so it's most likely something I'm doing wrong.</p>
  
  <p>I've also noticed that the website I got the idea from is nearly always smooth. As far as I can see it's also using toggleClass – www.etq-amsterdam.com/</p>
  
  <p>Can anyone give me any pointers as to how I might be able to improve the code below?</p>
  
  <p>My code is the  following:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;header class="header"&gt;
    &lt;span id="button-one"&gt;&lt;/span&gt;
    &lt;span id="button-two"&gt;&lt;/span&gt;
    &lt;div class="push-menu-one"&gt;&lt;/div&gt;
    &lt;div class="push-menu-two"&gt;&lt;/div&gt;
    &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div class="content"&gt;&lt;/div&gt;
  
  &lt;footer class="footer"&gt;&lt;/footer&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html {
    position:relative;
    height:100%;
    left:0;
    right:0;
    background-color:pink;
    -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
    transition: all .6s cubic-bezier(.645,.045,.355,1); 
  }
  
  body {
    min-height:100%;
    margin:0; 
    padding:0; 
  
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
      display:flex;
  
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
      flex-direction: column;
  }
  
  .header {
    height:70px;
    width:100%;
    background-color:white;
  }
  
  .content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
      flex: 1;
  
    width:85%;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .footer {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
      display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
      flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
      align-items: center;
  
    height: auto;
    width: 100%;      
    padding: 10px 0 10px 0;
    background-color: #efefef;
   }
  
  /* PUSH MENUS */
  
  #button-one {
    display:inline-block;
    width:30px;
    height:30px;
    margin:20px;
    background-color:green;
    cursor:pointer;
  }
  
  #button-two {
    display:inline-block;
    float:right;
    width:30px;
    height:30px;
    margin:20px;
    background-color:orange;
    cursor:pointer;
  }
  
  .push-menu-one {
    position:fixed;
    top:0px;
    left:-295px;
    width:295px;
    height:100%;
    margin:0;
    padding:0;
    background-color:wheat;
    -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
    transition: all .6s cubic-bezier(.645,.045,.355,1);
  }
  
  .push-menu-two {
     position:fixed;
     top:0px;
     right:-295px;
     width:295px;
     height:100%;
     margin:0;
     padding:0;
     background-color:darkred;
     -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
     transition: all .6s cubic-bezier(.645,.045,.355,1);
  }
  
  .overlay {
     position:fixed;
     z-index:9;
     top:0px;
     left:0px;
     width:0px;
     height:0px;
     background-color:#000000;
     opacity:0;
  
     transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
   }
  
  .overlay.open-right,
  .overlay.open-left {
     width:100%;
     height:100%;
     opacity:0.4;
  
     transition: opacity 1s;
  }
  /* TOGGLE CLASSES */
  
  html.open-left {
    left:295px;
  }
  
  .push-menu-one.open-left {
    left:0;
  }
  
  html.open-right {
    left:-295px;
  }
  
  .push-menu-two.open-right {
    right:0;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>jQuery(document).ready(function($) {    
  
      $('#button-one').click(function() {
          $('html, .overlay, .push-menu-one').toggleClass('open-left');
  
   });
  
   $('#button-two').click(function() {
          $('html, .overlay, .push-menu-two').toggleClass('open-right');
  
  });
  
  $('.overlay').click(function() {
          $('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-left');
  
  $('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-right');
  
  });
  
  });
  </code></pre>