How can I animate a css3 drop shadow to give the effect an element is moving away from the screen

I would like to increase the x,y values of the css3 shadow from 0,0px to 20,20px so that it appears to be picked up from the screen.

I would like to apply this animation effect to the ui-sortable-helper element, which appears as I start moving a draggable element from a sortable list.

CSS for the ui-sortable-helper

.ui-sortable-helper
{
    box-shadow:         10px 10px 27px rgba(0, 0, 0, 0.30);
    -moz-box-shadow:    10px 10px 27px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: 10px 10px 27px rgba(0, 0, 0, 0.30);
}

Sortable containers, and the draggable element events currently in place.

$  ('.task-bucket').sortable({
  connectWith: '.task-bucket',

  //When the sorting starts, get the id of the parent to the current element
  start: function(event, ui){
    //Get the current position of the element
    start = getPos(ui.item);
  },

  //When the sorting has stopped, get the id of the parent to the current element
  stop: function(event, ui) {
    //Get the current position of the element
    stop = getPos(ui.item);
    socketManager.emit('move-task', {from: start, to : stop});
  }
});

//Make .task elements draggable, and connect them to the sortable buckets
$  ('.task').draggable({
  connectToSortable: '.task-bucket'
});

newest questions tagged jquery – Stack Overflow