title: CSS Transition Ease not working
body: <p>I want the icon in the center of the circle to fade in and grow when the checkbox is :checked. </p>
  
  <p>The <code>span</code> around the <code>a</code> seems to be working nicely, and so it everything within the <code>a</code>. </p>
  
  <p>For some reason, the transition: ease-in-out isn't animating the height/width/opacity - even if I set the property to <code>all</code>. </p>
  
  <p>CODEPEN <a href="http://codepen.io/abenjamin/pen/LVVpwX" rel="nofollow">http://codepen.io/abenjamin/pen/LVVpwX</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;input type="checkbox" id="menu-toggle" name="menuToggle"/&gt;
    &lt;label for="menu-toggle"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;i class="fa fa-dribbble"&gt;
            &lt;figure&gt;3&lt;/figure&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;i class="fa fa-facebook"&gt;
            &lt;figure&gt;99+&lt;/figure&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;i class="fa fa-twitter"&gt;
            &lt;figure&gt;3&lt;/figure&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;p&gt;share&lt;/p&gt;
    &lt;/label&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#menu-toggle + label span a {
    display: none;
    height: 10px;
    width: 10px;
    opacity: 0.3;
    text-align: center;
    text-decoration: none;
    color: #3F7CAC;
    margin: 0 auto;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  
  
  #menu-toggle:checked + label span a {
    display: block;
    line-height: 50px;
    font-size: 20px;
    border: 1px solid #3F7CAC;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    box-sizing: border-box;
    opacity: 1;
  }
  </code></pre>