title: CSS transition on div triggered by inner checkbox
body: <p>I have the following simple example where I animate the position of a given div through CSS's transition directive (<a href="http://jsfiddle.net/rtubio/dmhqjhd3/" rel="nofollow">http://jsfiddle.net/rtubio/dmhqjhd3/</a>):</p>
  
  <pre><code>&lt;input type='checkbox' id='toggle' class='toggle' /&gt;
  &lt;label for='toggle'&gt;&lt;/label&gt;
  
  &lt;div id='area' class='area'&gt;
      &lt;div id='area-title' class='area-title'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>... and I have the associated CSS code (see the JSFiddle) that animates the translation of the div -50px towards the bottom of the page whenever the label of the checkbox is clicked. If I move the checkbox+label to the inside of the div that I am trying to animate:</p>
  
  <pre><code>&lt;div id='area' class='area'&gt;
      &lt;div id='area-title' class='area-title'&gt;
          &lt;input type='checkbox' id='toggle' class='toggle' /&gt;
          &lt;label for='toggle'&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>... the animation stops working (see this second JSFiddle with the non-working example: <a href="http://jsfiddle.net/rtubio/k5o0uggu/" rel="nofollow">http://jsfiddle.net/rtubio/k5o0uggu/</a>). I have been looking for possible incompatibilities, but I have found none.</p>
  
  <p>Does CSS have any restriction for this case?</p>