title: CSS transition triggered by responsive breakpoint
body: <p><strong>The background:</strong> </p>
  
  <p>I have a Bootstrap nav bar that is supposed to slide out from the right as opposed to drop down from the top. I didn't want to use complicated off-canvas or other plug-ins for this. It seems to work just fine by pushing the left coordinate of the containing div off to the right (100%) when it is not visible. I don't get the horizontal scroll bar on the actual page and did not investigate if it is because of Codepen or a missing CSS rule, so please ignore that.</p>
  
  <p><strong>The problem:</strong></p>
  
  <p>The CSS transition gets triggered by either a click (via class change) or (unwanted) by a media query/responsive breakpoint (by resizing the browser width from +1200 down until you hit the breakpoint). Then the CSS transition starts because the left coordinate of the DIV is 0 for the desktop and needs to change to 100% for the tablet resolution, thus making the menu invisible. This should not be animated.</p>
  
  <p>I need to somehow prevent the breakpoint from triggering the transition. I know there are JavaScript options, but I am hoping for a logical fix in my CSS that I am not seeing.</p>
  
  <p><a href="http://codepen.io/anon/pen/sKLvn" rel="nofollow">http://codepen.io/anon/pen/sKLvn</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* nav bar */
  .navbar-tablet {
      display: none; }
  .navbar-inverse .navbar-brand {
      clear: both; 
      text-transform: uppercase;
      padding: 5px;
      height: 30px;
      font-size: 1.2em;
      font-family: 'Lato', sans-serif;
      font-weight: bold; }
  
  .navbar-stuff, 
  .navbar-links {
      float: left; }
  
  .navbar-stuff {    
      clear: both; 
      font-family: 'Lato', sans-serif;
      font-weight: bold; 
      margin-top: 20px; }
      .navbar-stuff .navbar-callbutton {
          font-family: 'Lato', sans-serif;
          font-weight: bold;
          margin-right: 20px;
          text-transform: uppercase; }
      .navbar-stuff .navbar-address {
          font-family: 'Lato', sans-serif;
          font-weight: normal;
          color: #838181;  
          margin-top: 20px;
          padding-bottom: 20px; }
      .form-icon .fa-circle,
      .email-icon .fa-circle {
          color: #0f9cd8; }
      .facebook-icon .fa-circle {
          color: #537bbd;  }
      .linkedin-icon .fa-circle {
          color: #2085c7;  }
      .twitter-icon .fa-circle {
          color: #78cdf0;  }
  
  
  
  .navbar &gt; div {
      width: 100%;
      position: relative;
      background-color: #2b2b2b;
      border-color: #2b2b2b; }
  #navbar-collapse {
      display: block;
      background-color: #2b2b2b;
      border-color: #2b2b2b;
   position: absolute;
   left: 100%;
      height: 500px;
      width: 100%;
   -moz-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
   -webkit-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s;
   -ms-transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s; 
   transition: left 1s ease, width 0s ease-out 1s, border-width 0s ease-out 1s; }
      #navbar-collapse.showing {
       left: 100px;
       width: 100%;
       -moz-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
       -webkit-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
       -ms-transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s;
       transition: left 1s ease 0.1s, width 0s ease-out 0.1s, border-width 0s ease-out 0.1s; }
  
  
  @media (min-width: 768px) {
  
      .navbar-tablet {
          display: inline-block;
          clear: none; 
          text-transform: uppercase;
          vertical-align: top;
          margin-top: 15px;
          padding-left: 25px;
          height: 30px;
          font-size: 1.1em;
          font-family: 'Lato', sans-serif;
          font-weight: bold; }
          .navbar-tablet,
          .navbar-tablet:focus {
              color: white; }
          .navbar-tablet .dimwit,
          .navbar-tablet:focus .dimwit {
              color: #999; }
          .navbar-tablet:hover {
              text-decoration: none;
              color: #98e0ff; } 
  
      .navbar-tablet.collapsed {
          display: none; }
  }
  
  
  @media (min-width: 1200px) {
      body {
          padding-top: 0px; }
  
      .jumbotron {
          max-height: 125px;
          min-height: 125px;
          border-bottom: 1px solid #c2c2c2; }
  
      .navbar {
          border: none;
          padding: 20px; }
  
      #navbar-collapse {
          position: relative;
          margin-left: 100px;
          left: 0px; 
          background-color: transparent;
          border-color: transparent; 
          -moz-transition: none;
          -webkit-transition: none;
          -ms-transition: none;
          transition: none; }
    
    
    
        .navbar &gt; div {
          width: 100%;
          position: relative;
          background-color: transparent;
          border-color: transparent; }
  
      .navbar-tablet {
          display: none; }
  
      .navbar-links {
          text-align: justify;
          margin-left: 0px;
          width: 80%; }
  
      .navbar-stuff {
          display: none; }
  
      .navbar-inverse {
          background-color: transparent;
          border-color: transparent; }
  
          .navbar-inverse.scrolling {
              border-color: #2b2b2b;
              background: rgb(75,75,75); 
              background: rgba(75,75,75, 0.9); }
  
          .navbar-inverse .navbar-brand {
              margin-left: 10px;
              text-align: right;
              padding-top: 32px;
              font-size: 18px;
              line-height: 20px;
              height: 70px;
              clear: none;
              font-size: 1.1em; }
  
          .navbar-inverse .navbar-brand {
              margin-left: 5%; }
              .navbar-inverse .navbar-brand,
              .navbar-inverse .navbar-brand:focus {
                  color: #2b2b2b; }
                  .navbar-inverse .navbar-brand .dimwit,
                  .navbar-inverse .navbar-brand:focus .dimwit {
                      color: #2b2b2b;}
              .navbar-inverse .navbar-brand.current,
              .navbar-inverse .navbar-brand.current:focus {
                  color: #009ddc; }
                  .navbar-inverse .navbar-brand.current .dimwit,
                  .navbar-inverse .navbar-brand:focus.current .dimwit {
                      color: #009ddc;}
          .navbar-inverse.scrolling .navbar-brand,
          .navbar-inverse.scrolling .navbar-brand:focus {
              color: white; }
          .navbar-inverse.scrolling  .navbar-brand .dimwit,
          .navbar-inverse.scrolling  .navbar-brand:focus .dimwit {
              color: white; }
      .navbar-inverse .navbar-brand:hover {
          color: #98e0ff !important; } 
  
      .hasJumboTron .navbar-inverse .navbar-brand,
      .hasJumboTron .navbar-inverse .navbar-brand:focus {
          color: white; }
          .hasJumboTron .navbar-inverse .navbar-brand .dimwit,
          .hasJumboTron .navbar-inverse .navbar-brand:focus .dimwit {
              color: white; }
              .hasJumboTron .navbar-inverse .navbar-brand.current,
              .hasJumboTron .navbar-inverse .navbar-brand.current:focus {
                  color: #000; }
                  .hasJumboTron .navbar-inverse .navbar-brand.current .dimwit,
                  .hasJumboTron .navbar-inverse .navbar-brand:focus.current .dimwit {
                      color: #000;}
              .hasJumboTron .navbar-inverse.scrolling .navbar-brand.current,
              .hasJumboTron .navbar-inverse.scrolling .navbar-brand.current:focus {
                  color: #009ddc; }
                  .hasJumboTron .navbar-inverse.scrolling .navbar-brand.current .dimwit,
                  .hasJumboTron .navbar-inverse.scrolling .navbar-brand:focus.current .dimwit {
                      color: #009ddc;}
      
      #logoplaceholder {
          background-image: url('../images/logo_blue_md.png');
          width: 77px;
          height: 69px; }
  
      .hasJumboTron #logoplaceholder {
          background-image: url('../images/logo_white.png');
          width: 74px;
          height: 68px; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://development.podconsulting.net:8088/js/pod.js"&gt;&lt;/script&gt;
  &lt;script src="http://development.podconsulting.net:8088/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
              &lt;div&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a href="/"&gt;&lt;div id="logoplaceholder"&gt;&lt;/div&gt;&lt;/a&gt;
                      &lt;button type="button" class="navbar-toggle"&gt;
                          &lt;div class="icon-bar"&gt;&lt;i class="fa fa-bars fa-2x"&gt;&lt;/i&gt;&lt;/div&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar-collapse" class="navbar-collapse collapse"&gt;
                      &lt;div class="navbar-links"&gt;
                          &lt;!-- Menu --&gt;
                          &lt;a class="navbar-brand" href="#"&gt;Services &lt;span class="dimwit"&gt;+&lt;/span&gt; Philosophy&lt;/a&gt;
                          &lt;a class="navbar-brand" href="#"&gt;Case Studies&lt;/a&gt;
                          &lt;a class="navbar-brand" href="#"&gt;People &lt;span class="dimwit"&gt;+&lt;/span&gt; Culture&lt;/a&gt;
                          &lt;a class="navbar-brand" href="#"&gt;Jobs&amp;nbsp;&lt;div class="jobnumber"&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
                          &lt;!-- End Menu --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!--/.navbar-collapse --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>