/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/

/*
==============================================
bigEntrance
==============================================
*/

.bigEntrance{
	animation-name: bigEntrance;
	-webkit-animation-name: bigEntrance;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;			
}



@keyframes bigEntrance {
	0% {
		transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;
	}
	45% {
		transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	75% {
		transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	100% {
		transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}		
}

@-webkit-keyframes bigEntrance {
	0% {
		-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;
	}
	45% {
		-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	75% {
		-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	100% {
		-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}				
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  
	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
}
.zoomIn1 {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  /**/
	animation-duration: .3s;	
	-webkit-animation-duration: .3s;
	animation-timing-function:ease-out;		
	-webkit-animation-timing-function:ease-out;	
}
.zoomIn2 {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  /**/
	animation-duration: .7s;	
	-webkit-animation-duration: .6s;
	animation-timing-function:ease-out;	
	-webkit-animation-timing-function:ease-out;	
}
.zoomIn3 {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  /**/
	animation-duration: 1.3s;	
	-webkit-animation-duration: 1.3s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;		
}
.zoomIn4 {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  
  /**/
	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.8, 1.8, 1.8);
    transform: scale3d(1.8, 1.8, 1.8);
  }

  50% {
    opacity: 1;
  }
}


.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  
	animation-duration:2s;	
	-webkit-animation-duration:2s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes todo {
   0% {top:0%;}
   50% {top:3%;}
   100% {top:0%;}
	}
@keyframes todo2 {
   0% {top:3%;}
   50% {top:0%;}
   100% {top:3%;}
	}