jquery css() issue

jquery css() issue

Hi;
I have a full viewport div I want to clip in a user clicked area and animate the clip back to the div's original size creating an effect of a growing rectangle that starts from the clicked area to cover the screen.(ala  http://codepen.io/guykatz/pen/OXyLge)

my simplified code is as follows:

  1. myDiv.css('clip','rect(50px, 400px, 500px, 50px)');// rect values are calculated from the user click
  2. myDiv.css('clip','rect(0px, 100vw, 100vh,0px)');
the code above does not seem to work well. I am not sure if this is jquery or browser timing issue. 
however, setting a timeout (see below) between css (clip) invocations works perfectly.

  2. myDiv.css('clip','rect(50px, 400px, 500px, 50px)');// rect values are calculated from the user click
  3. setTimeout(function(){
  4.         myDiv.css('clip','rect(0px, 100vw, 100vh,0px)');
  5. }, 3000);
and so, am I doing something wrong? did I misuse the CSS function?
your help is welcomed.
thanks