Andrews Trash Wiggle it Css3 JQuery UI Droppable Drag

Andrews Trash Wiggle it Css3 JQuery UI Droppable Drag

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="stack">one</div>
  <div id="trash">Trash It</div>

CSS

.stack{
width:100px;
height:100px;
background-color:red;
border:1px solid black; 
    margin:3px;
}



#trash{
  width:150px;
  height:150px;
  margin-top:20px;
  margin-left:200px;
  text-align:center;
  position: relative;

background-color:none;
//border:1px solid black; 
}


 
 
#trash:before {
    content: "\f1f8";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 4em;
    position: absolute;
    top: 10px;
    left: 0;
}

@-webkit-keyframes wiggle {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake {
	-webkit-animation-name: wiggle;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: 1; /*infinite*/
	-webkit-animation-timing-function: linear;
}

JavaScript

$(function() {
    $(".stack").draggable();

    $('#trash').droppable({
        over: function(event, ui) {
            ui.draggable.fadeOut("slow", function(){
                this.remove();
                   $("#trash").addClass("shake");
            })
        },
        drop: function(event, ui) {
        $("#trash").removeClass("shake")
        }
    });
});