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

Made by Justin Aguilar

www.justinaguilar.com/animations/

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

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

.hide-animation{
	visibility: hidden;
}

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

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

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

	visibility: visible !important;
}

@keyframes slideDown {
	0% {
		transform: translateY(-30%);
		opacity: 0.0;
	}
	/*60%{
		opacity: 0.0;
	}*/
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-30%);
		opacity: 0.0;
	}
	/*60%{
		opacity: 0.0;
	}*/
	100% {
		-webkit-transform: translateY(0%);
	}	
}


/*
==============================================
slideUp
==============================================
*/

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

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

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

	visibility: visible !important;			
}



@keyframes slideUp {
	0% {
		transform: translateY(30%);
		opacity: 0.0;
	}
	/*60%{
		opacity: 0.0;
	}*/
	100% {
		transform: translateY(0%);
		opacity: 1;
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(30%);
		opacity: 0.0;
	}
	/*60%{
		opacity: 0.0;
	}*/

	100% {
		-webkit-transform: translateY(0%);
		opacity: 1;
	}	
}

/*
====================