iOS multitasking animations

iOS style multitasking close and wiggle animations

HTML

<ul>
  <li class="blue"></li>
  <li class="orange"></li>
  <li class="red"></li>
  <li class="green"></li>
</ul>

CSS

body {
  margin: 2em;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  margin: 0 40px 40px 0;
  list-style: none;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.6);
  position: relative;
  z-index: 10;
}

ul li:before {
  content: '';
  display: block;
  background: none;
  height: 150px;
  width: 150px;
  overflow: hidden;
  position: relative;
  top: -90px;
  left: -25px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  position: relative;
  bottom: 0px;
}

.orange {
  border: 2px solid #E58209;
  background: -webkit-radial-gradient(center, ellipse cover, #ffaf4b 0%,#ff920a 100%);
}

.blue {
  border: 2px solid #3276BA;
  background: -webkit-radial-gradient(center, ellipse cover, #7abcff 0%,#60abf8 44%,#4096ee 100%);
}

.red {
  border: 2px solid #940808;
  background: -webkit-radial-gradient(center, ellipse cover, #ff3019 0%,#cf0404 100%);
}

.green {
  border: 2px solid #586609;
  background: -webkit-radial-gradient(center, ellipse cover, #a4b357 0%,#75890c 100%);
}

.close {
-webkit-animation: closing 1s ease forwards;
    -webkit-transform: scale(0);
}

@-webkit-keyframes closing {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(0);
}
51% {
    -webkit-transform: scale(0);
width: 100px;
margin: 0 40px 40px 0;
}
100% {
    -webkit-transform: scale(0);
width: 0;
margin: 0;
}
}

JavaScript

// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

animate();
//wiggle();

function animate() {
    requestAnimFrame(animate);
    //wiggle();
}

function wiggle() {
$('li').each(function(elem){
    var posneg = ['','-',''];
    var rotate = posneg[Math.ceil(Math.random()*2)]+Math.ceil(Math.random()*3);
    var xy = Math.ceil(Math.random()*10)+'px, '+Math.ceil(Math.random()*10)+'px';
  $(this).css('-webkit-transform', 'translate3d('+xy+',0) rotate('+rotate+'deg)');
    $(this).css('-moz-transform', 'translate3d('+xy+',0) rotate('+rotate+'deg)');
});
}

$('li').click(function(){
    $(this).addClass('close');
});