title: CSS Transition not working with visibility:hidden
body: <p>I have an html/css/javascript page that works perfectly <i>except</i> for the first time. Basically, the <code>divLUMProvideZipCode</code> starts with the <code>hidden</code> class, but when you press the button it will become visible. The problem is that it doesn't fade in like it should, it just appear immediately, without any transition. After that, it works perfect, but chances are the user will only press the button once, twice tops so to get the effect, it needs to work the first time. Anyone got any ideas?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Leads User Maintenance&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="LeadsMaintenance.css"/&gt;
  &lt;script&gt;
      function changeClass() { 
          var doc = document.getElementById("divLUMProvideZipCode");
          if (doc.className.indexOf("hidden") &gt;= 0)
          {
              doc.className = "visible solidShadowBox";               
          }
          else
          {
              doc.className = "hidden";               
          }
      };
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="centeredBodyWrapper"&gt;
      &lt;div id="divLUMNavigation" class="solidShadowBox"&gt;
          &lt;button onClick="changeClass()"&gt;Show Me&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="divLUMUserSelect" class="solidShadowBox"&gt;
  
      &lt;/div&gt;
  
      &lt;div id="divLUMUserInformation" class="solidShadowBox"&gt;
          &lt;div id="divLUMProvideZipCode" class="hidden solidShadowBox"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  .centeredBodyWrapper {
      margin: auto;
      width: 960px;
  }
  #divLUMNavigation {
      width: 100%;
      height: 50px;
      margin: 10px 10px 10px 10px;
      padding: 5px 5px 5px 5px;
      position: relative;
      top: 0px;
      left: 0px;
  }
  #divLUMUserSelect {
      width: 100%;
      height: 50px;
      margin: 10px 10px 10px 10px;
      padding: 5px 5px 5px 5px;
      position: relative;
      top: 0px;
      left: 0px;
  }
  #divLUMUserInformation {
      width: 100%;
      height: 640px;
      margin: 10px 10px 10px 10px;
      padding: 5px 5px 5px 5px;
      position: relative;
      top: 0px;
      left: 0px;
  }
      #divLUMProvideZipCode {
          width: 200px;
          height: 350px;
          margin: 10px 10px 10px 10px;
          padding: 5px 5px 5px 5px;
          position: relative;
          top: 0px;
          left: 0px;
          -webkit-transition: all 1s;
          -moz-transition: all 1s;
          -o-transition: all 1s;
          ms-transition: all 1s;
          transition: all 1s;
      }
  .solidShadowBox {
      -webkit-box-shadow: 0px 0px 8px 0px #909090;
      -moz-box-shadow: 0px 0px 8px 0px #909090;
      -o-box-shadow: 0px 0px 8px 0px #909090;
      -ms-box-shadow: 0px 0px 8px 0px #909090;
      box-shadow: 0px 0px 8px 0px #909090;
  
  }
  .hidden {
      visibility: hidden;
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -o-transition: all 1s;
      ms-transition: all 1s;
      transition: all 1s;
  }
  .visible {
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -o-transition: all 1s;
      ms-transition: all 1s;
      transition: all 1s;
      visibility: visible
  }
  </code></pre>