Animate.css - falling

falling effects

by Jon Beebe

HTML

<link rel="stylesheet" href="http://daneden.me/animate/animate.css">
<div id="container">
  <div id="target1" class="animated">I'm the target</div>
  <div id="target2" class="animated">I'm the target</div>
  <div id="target3" class="animated">I'm the target</div>
</div>
<br />
<button id="begin">Begin</button>
<br />
<button id="reset">Reset</button>

CSS

#container {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective:800px;
}

#container > div {
  width: 200px;
  height: 70px;
  text-align: center;
  background: #eee;
  line-height: 100px;
  position: absolute;
  top: 0;
  -webkit-perspective:800px;
}

#target1 {
  left: 100px;
}

#target2 {
  left: 400px;
}

#target3 {
  left: 700px;
}

@-webkit-keyframes fall {
	0% {}	
	100% { 
    -webkit-transform: translateY(700px) rotateY(-20deg) rotateX(-40deg) rotateZ(50deg); 
    opacity: 0; 
    -webkit-transform-origin: center center;   
  }
}

@-webkit-keyframes fall-1 {
	0% {}	
	100% { 
    -webkit-transform: translateY(1200px) rotateY(-40deg) rotateX(20deg) rotateZ(30deg); 
    opacity: 0; 
    -webkit-transform-origin: center center;   
  }
}

@-webkit-keyframes fall-2 {
	0% {}	
	100% { 
    -webkit-transform: translateY(900px) rotateY(20deg) rotateX(-10deg) rotateZ(-10deg); 
    opacity: 0; 
    -webkit-transform-origin: center center;   
  }
}

.fall, .fall-1, .fall-2 {
  -webkit-animation-timing-function: cubic-bezier(0.245, 0, 0.875, 0.130); 
  -webkit-animation-duration: 0.4s;
	-webkit-animation-name: fall; 
}

.fall-1 {
	-webkit-animation-name: fall-1; 
}

.fall-2 {
	-webkit-animation-name: fall-2; 
}

JavaScript

jQuery('#begin').on('click', function() {
  jQuery('#target1').addClass('fall-2');
  jQuery('#target2').addClass('fall-1');
  jQuery('#target3').addClass('fall');
});

jQuery('#reset').on('click', function() {
  jQuery('#target1').removeClass('fall-2');
  jQuery('#target2').removeClass('fall-1');
  jQuery('#target3').removeClass('fall');
});