title: animation: Move element from one position to another
body: <p>I'm trying to make a nice visual effect so the user can actual see that an element was been added to the waiting list.</p>
  
  <p>Moved from the lovely Apple OS effects in several application like iMovie when you swap the library with the video history I'm trying to do a simple movement from a div element... but this turned out to be a little hard.</p>
  
  <p><strong>Question</strong> will be, does anyone know any library to do the same in a simpler/nicer way?</p>
  
  <p>What I could accomplish in 5 minutes was this:</p>
  
  <blockquote>
    <p><a href="http://jsbin.com/efihax" rel="nofollow noreferrer">http://jsbin.com/efihax</a></p>
  </blockquote>
  
  <p>edit link: <a href="http://jsbin.com/efihax/edit" rel="nofollow noreferrer">http://jsbin.com/efihax/edit</a></p>
  
  <p><strong>My idea</strong> is so smoothly shrink the <code>.hero-unit</code> div and make it like it's been added to the <strong>Waiting List</strong></p>
  
  <p>after this first 5 minutes I could see that this would be turn out nice if I started to code  an endless <code>animate</code> calls...  not a good practice.</p>
  
  <p>Is there any other way? <strong>Thought about CCS3</strong> transitions / animations but I'm not that familiarized with it and still don't know how I could do this...</p>
  
  <p>An image to show what I'm trying to accomplish with the <code>animate</code></p>
  
  <p><img src="https://i.stack.imgur.com/0Vpc6.png" alt="enter image description here"></p>