A CodePen by Denys Mishunov. Genie-like list items animation

index.html

<div id="wrapper">

  <ul id="drops-wrapper">
    <li><a href="#" class="toggle" data-genie-target="#target">Click me 1</a></li>
    <li><a href="#" class="toggle" data-genie-target="#target">Click me 2</a></li>
    <li><a href="#" class="toggle" data-genie-target="#target">Click me 3</a></li>
    <li><a href="#" class="toggle" data-genie-target="#target">Click me 4</a></li>
    <li><a href="#" class="toggle" data-genie-target="#target">Click me 5</a></li> 
  </ul>
  
  <div id="target"><h2>Landing zone</h2></div>

</div>

<footer>
  <a href="http://mishunov.me">Denys Mishunov</a>
  <a href="http://twitter.com/mishunov">@mishunov</a>
</footer>

script.js

var t = 1000, // duration of the CSS genie animation, ms
    targets = document.querySelectorAll('.toggle');

$.fn.getCenter = function () {
  return {
    x: this.offset().left + this[0].offsetWidth/2,
    y: this.offset().top + this[0].offsetHeight/2
	};
}

$('.toggle').bind('click', function (ev) {
  
  ev.preventDefault();  
  
  var $this = $(this),
      $target = $($this.attr('data-genie-target')),
      toggleCenter = $this.getCenter(),
      targetCenter = $target.getCenter();
  
  $this
    .width($this.width())
    .height($this.height())
    .addClass('genie')
    .css('left', (targetCenter.x - toggleCenter.x) + 'px')
    .css('top', (targetCenter.y - toggleCenter.y) + 'px');
  
  _.delay(function (item) {
    var $n = $(item).clone();
    $n
      .removeClass('genie')
			.removeAttr('style')
      .removeAttr('data-genie-target');
    target.appendChild($n[0]);

    _.defer(function(){
    	$n.addClass('in');
    });    
    
    $(item).remove();
  }, t, this);

});

style.less

.genie {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 10px;
  zoom: 1;
  transition:
      left 1s ease-in,
      top 1s cubic-bezier(.46,1.27,.7,1.94);
  animation: lift 1s linear;
  animation-fill-mode: forwards;  
}
@keyframes lift {
  0% {
    box-shadow: 0 0 .5em rgba(0,0,0,.5);  
  }
  50% {
    box-shadow: 0 3em 2em rgba(0,0,0,.2);
    padding: 10px;
    width: 105%;
    height: 105%;
    font-size: 103%;
    line-height: normal;
  }
  70% {
    box-shadow: 0 2em .5em rgba(0,0,0,.3);
  }
  85% {
    box-shadow: 0 1em .5em rgba(0,0,0,.4);
  }  
  100% {
    padding: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    width: 0;
    border-width: 0;
    zoom:.001;
    box-shadow:  0 0 0 rgba(0,0,0,0);
  }
}


/* PRETYFICATION */
@import url("http://fonts.googleapis.com/css?family=Give+You+Glory|Source+Sans+Pro:600");
body {
  font-family: "Source Sans Pro", sans-serif;
  padding: 2em;
  height: 100%;
  background: url(data:image/png;base64,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) repeat;
}
footer {
  font-family: 'Give You Glory', cursive;
  position: absolute;
  bottom: 1em;
  left: 1em;
  color: #999;
  font-size: 1.2em;
  a {
    text-decoration: none;
	  color: #999;
    border: none;
  }
}
html, body, #wrapper {
  height: 100%;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
#drops-wrapper {
  margin: 2em;
  width: 300px;
  margin: 2em 0 2em 2em;
  padding: 0;
  list-style: none;
  background-image: linear-gradient(top, #BEA680, #7E6847);
  border-radius: 5px;
  position: relative;
  box-shadow: 0 0 0 10px #333;
}
li a {
  display: block;
  padding: 10px;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  color: #000;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  font-size: 13px;
  font-weight: 600;
  background-image: linear-gradient(top, rgba(0,0,0,.05), rgba(255,255,255,.1));
  background-color: transparent;
  transition: background-color .1s ease;
}
li:first-child a {
  border-radius: 5px 5px 0 0;
}
li:last-child a {
  border-radius: 0 0 5px 5px;
}  
li a:hover {
  background-image: none;
  background-color: #9EADBE;
  cursor: pointer;
}
#toggle {

}
#target {
  position: absolute;
  font-weight: 600;
  color: #BEA680;
  text-shadow: 0 -1px 0 #000;
  border-left: 10px solid rgba(0,0,0,.2);
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background: #2B343E;
  text-align: center;
  h2 {
    font-size: 2em;
    color: #7E6847;
  }
  a {
    color: #BEA680;
  }
  .toggle {
    display: block;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    font-size: 13px;
    font-weight: 600;
    background-image: linear-gradient(top, rgba(0,0,0,.05), rgba(255,255,255,.1));
    background-color: transparent;
    opacity: 0;
    transition: opacity .15s linear;    
    &.in {
      opacity: 1;    
    }
  }
}