title: How do I animate CSS box-shadow depth (with jQuery or CSS3 transitions)?
body: <p>This does do the delays but doesn't seem to apply the style changes until the end:</p>
  
  <pre><code>for (i=20;i&gt;=0;i--) {            
      var boxShadow = i+"px "+i+"px "+i+"px #888";
      $('article').css("box-shadow", boxShadow);
      sleep(20);
  }
  function sleep(ms)
  {
      var dt = new Date();
      dt.setTime(dt.getTime() + ms);
      while (new Date().getTime() &lt; dt.getTime());
  }
  </code></pre>
  
  <p>This doesn't apply the delays at all:</p>
  
  <pre><code>for (i=20;i&gt;=0;i--) {            
      var boxShadow = i+"px "+i+"px "+i+"px #888";
      $('article').delay(500).css("box-shadow", boxShadow);
  }
  </code></pre>
  
  <p>Can this be done more easily with css3 transitions?  Am I just making some small jquery error in the delay sample?</p>
  
  <p>Thank you to anyone who can help.</p>