title: bootstrap 3 mobile collapse fade in and out on toggle
body: <p>0Is there anyway of replacing the slide down animation on the mobile navbar-collapse to fade in/out when called upon? I've tried using CSS keyframes and have managed to get the animation working but in reverse - instead of the the menu fading in and out when called upon, the menu is open when the page loads and fades out when the toggle button is pressed.</p>
  
  <p>This is the nav html:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
  &lt;div class="center"&gt;
  &lt;div class="navbar-header"&gt;
  
  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-  collapse"&gt;
  &lt;i class="fa fa-bars fa-2x"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="navbar-collapse collapse"&gt;
  &lt;ul class="nav navbar-nav"&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Dierentuin&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;B-Roll&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Carousel&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Structural Curtains&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Proxy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Art in the Underbelly&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Suburbanism&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Novelty&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Album Covers&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Fortyounce London&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Covmns Clothing&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Siobahn Palmer&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Django Django&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;I like Trains&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Glass Animals&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Spring Offensive&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Black Bird&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Olympians&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;The Soft&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Wordplay Issue #10&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>.navbar-nav {
   margin: 0;
   min-height: auto;
  }
  
  .navbar-nav {
  float: none!important;
  }
  
  .navbar-nav&gt;li {
  float: none;
  }
  
  .navbar-inverse {
  background-color: transparent;
  border-color: transparent;
  }
  
  .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: transparent;
  }
  
  .navbar-inverse .navbar-toggle {
  border-color: transparent; 
  }
  
  .nav&gt;li{
  display:inline-block;
  }
  
  .collapsing {
  opacity: 0;
  transition:opacity 0.3s linear; 
  -webkit-transition:opacity 0.3s linear; 
  -moz-transition:opacity 0.3s linear; 
  -o-transition:opacity 0.3s linear;
  }
  
  .navbar-collapse.collapse.in{
  opacity:0;
  transition:opacity 0.3s linear; 
  -webkit-transition:opacity 0.3s linear; 
  -moz-transition:opacity 0.3s linear; 
  -o-transition:opacity 0.3s linear;
  }
  
  .navbar-collapse.collapse{
  opacity: 1;
  transition:opacity 0.3s linear; 
  -webkit-transition:opacity 0.3s linear; 
  -moz-transition:opacity 0.3s linear; 
  -o-transition:opacity 0.3s linear;
  }
  
  .navbar-collapse {
  width: auto;
  border-top: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-top: 194px;
  max-height: none;
  font-family:"aktiv-grotesk-std";
  font-weight: 400;
  line-height: 54px;
  font-size: 60px;
  display:block !important;
  }
  </code></pre>
  
  <p>I'm still learning how to get to grips with Bootstrap 3, so any help would be gratefully received. </p>