title: CSS3 transition misunderstood
body: <p>This should be a very simple straightful linear transition effect, but for somehow it's not working. Any idea why?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="button-modern" style="background-color:#e73032"&gt;
      &lt;span style="color:#fff; font-size:1rem"&gt;MORE&lt;/span&gt;
      &lt;br&gt;&lt;span style="color:#fff; font-size:2rem"&gt;INFORMATION&lt;/span&gt;
  
      &lt;div class="button-modern--info"&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&lt;/div&gt;
      &lt;div class="button-modern--click js-button-modern--click"&gt; 
         &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.button-modern {
      padding: 18px 22px;
      position: relative;
  }
  .button-modern--opened .button-modern--info {
      text-transform: none;
      height: 100%;
  }
  .button-modern--click {
      width: 56px;
      height: 56px;
      position: absolute;
      bottom: 0;
      right: 0;
      overflow: hidden;
  }
  .button-modern--click &gt; span:before {
      font-family:'FontAwesome';
      font-weight: normal;
      font-style: normal;
      speak: none;
      vertical-align: middle;
      font-size: 26px;
      content:" \F107";
      padding: 0 10px 0 0;
      color: #fff;
      position: absolute;
      right: 0;
      bottom: 0;
  }
  .button-modern--opened .button-modern--click &gt; span:before {
      font-family:'FontAwesome';
      font-weight: normal;
      font-style: normal;
      speak: none;
      vertical-align: middle;
      font-size: 26px;
      content:" \F106";
      padding: 0 10px 0 0;
      color: #fff;
      position: absolute;
      right: 0;
      bottom: 0;
  }
  .button-modern--click &gt; span {
      cursor: pointer;
  }
  .button-modern--info {
      height: 0;
      overflow: hidden;
      -webkit-transition: all 200ms linear;
      -moz-transition: all 200ms linear;
      transition: all 200ms linear;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.button-modern').find('.js-button-modern--click').click(function (e) {
      $(this).parent().toggleClass('button-modern--opened');
  });
  </code></pre>
  
  <p>JSFiddle
  <a href="http://jsfiddle.net/zilli/7rpEW/" rel="nofollow">http://jsfiddle.net/zilli/7rpEW/</a></p>