title: Dynamically adding CSS class with transition-duration, visibility, and opacity not working in chrome
body: <p>I am trying to make a transition by dynamically adding class with  <code>transition-duration, visibility, and opacity</code>. Here the <code>.overlay</code> should transition to <code>red</code> color over <strong>1 second</strong> after clicking show button. It works perfectly in firefox, But <strong>not in CHROME &amp; IE9</strong></p>
  
  <pre><code>My chrome version: 31.0.1650.63 m
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/sYLhq/3/" rel="nofollow">FIDDLE DEMO >></a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="overlay"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button&gt;Show&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper {
      width: 500px;
      height: 100px;
      background-color: black;
  }
  
  .overlay {
      background-color: red;
      width: 100%; 
      height: 100%;
      visibility: hidden;
      opacity: 0;
  }
  
  .show {
      visibility: visible;
      opacity: 1;
      transition-duration: 1s;
  }
  </code></pre>
  
  <p><strong>SCRIPT</strong></p>
  
  <pre><code>document.querySelector('button').addEventListener('click', function() {
      document.querySelector('.overlay').classList.add('show');
  });
  </code></pre>