50줄 애니메이션 라이브러리

emile.js

<script src="js/emile.js"></script>
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

<script>
  emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
    duration: 500,
    after: function(){
      emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
        duration: 4000, easing: bounce
      });
    }
  });
 
  function bounce(pos) {
    if (pos < (1/2.75)) {
        return (7.5625*pos*pos);
    } else if (pos < (2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
  }
</script>