title: Animate CSS clip
body: <p>I am trying to use CSS3 transitions to animate a CSS <code>clip</code> with no sucess. The image just clips without the transition.</p>
  
  <p>What am I missing?</p>
  
  <pre><code>#clipped {
      position:absolute;
      width: auto;
      clip: rect(100, 100, 100, 100);
      -webkit-transition: all 0.5s ease-out;
      -moz-transition: all 0.5s ease-out;
      transition: all 0.5s ease-out;
  }
  #clipped:hover {
      clip: rect(50px, 200px, 200px, 0);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/66CFD/" rel="noreferrer"><strong>Fiddle</strong></a></p>