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

Made by Justin Aguilar

www.justinaguilar.com/animations/

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

#animatedElement { visibility: hidden; }	
	
	
	/*
	==============================================
	floating
	==============================================
	*/

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

		animation-duration: 1.5s;	
		-webkit-animation-duration: 1.5s;

		animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
	}

	@keyframes floating {
		0% {
			transform: translateY(0%);	
		}
		50% {
			transform: translateY(8%);	
		}	
		100% {
			transform: translateY(0%);
		}			
	}

	@-webkit-keyframes floating {
		0% {
			-webkit-transform: translateY(0%);	
		}
		50% {
			-webkit-transform: translateY(8%);	
		}	
		100% {
			-webkit-transform: translateY(0%);
		}			
	}
	
	
/*
==============================================
fadeIn
==============================================
*/

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

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

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

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}

/*
==============================================
expandOpen
==============================================
*/


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

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

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

	visibility: visible !important;	
}

@keyframes expandOpen {
	0% {
		transform: scale(1);		
	}
	50% {
		transform: scale(1.05);
	}	
	
	100% {
		transform: scale(1);
	}			
}

@-webkit-keyframes expandOpen {
	0% {
		-webkit-transform: scale(1);		
	}
	50% {
		-webkit-transform: scale(1.05);
	}	
	
	100% {
		-webkit-transform: scale(1);
	}					
}




/*
==============================================
slideDown
==============================================
*/


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

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

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

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}	
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}		
	100% {
		-webkit-transform: translateY(0%);
	}	
}