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

Made by Justin Aguilar

www.justinaguilar.com/animations/

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

/*
==============================================
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%)}
	50%{transform: translateY(8%)}
	65%{transform: translateY(-4%)}
	80%{transform: translateY(4%)}
	95%{transform: translateY(-2%)}			
	100% {transform: translateY(0%)}		
}

@-webkit-keyframes slideDown {
	0% {-webkit-transform: translateY(-100%)}
	50%{-webkit-transform: translateY(8%)}
	65%{-webkit-transform: translateY(-4%)}
	80%{-webkit-transform: translateY(4%)}
	95%{-webkit-transform: translateY(-2%)}			
	100% {-webkit-transform: translateY(0%)}	
}

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


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

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

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

	visibility: visible !important}

@keyframes slideUp {
	0% {transform: translateY(100%)}
	50%{transform: translateY(-8%)}
	65%{transform: translateY(4%)}
	100% {transform: translateY(0%)}	
}

@-webkit-keyframes slideUp {
	0% {-webkit-transform: translateY(100%)}
	50%{-webkit-transform: translateY(-8%)}
	65%{-webkit-transform: translateY(4%)}
	100% {-webkit-transform: translateY(0%)}	
}

/*
==============================================
slideLeft
==============================================
*/


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

	animation-duration: .8s;	
	-webkit-animation-duration: .8s;

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

	visibility: visible !important}

@keyframes slideLeft {
	0% {transform: translateX(50%)}
	100% {transform: translateX(0%)}
}

@-webkit-keyframes slideLeft {
	0% {-webkit-transform: translateX(50%)}
	100% {-webkit-transform: translateX(0%)}
}

/*
==============================================
slideRight
==============================================
*/


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

	animation-duration: 1.4s;	
	-webkit-animation-duration: 1.4s;

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

	visibility: visible !important}

@keyframes slideRight {
	0% {transform: translateX(-100%)}
	40% {transform: translateX(-100%)}
	100% {transform: translateX(0%)}	
}

@-webkit-keyframes slideRight {
	0% {-webkit-transform: translateX(-100%)}
	40% {-webkit-transform: translateX(-100%)}
	100% {-webkit-transform: translateX(0%)}
}

/*
==============================================
expandUp
==============================================
*/


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

	animation-duration: 3.5s;	
	-webkit-animation-duration: 3.5s;

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

	visibility: visible !important}

@keyframes expandUp {
	0% {transform: translateY(60%) scale(0.6) scaleY(0.5)}
	50% {transform: translateY(60%) scale(0.6) scaleY(0.5)}
	60%{transform: translateY(-7%) scaleY(1)}
	100% {transform: translateY(0%) scale(1) scaleY(1)}	
}

@-webkit-keyframes expandUp {
	0% {-webkit-transform: translateY(60%) scale(0.6) scaleY(0.5)}
	50% {-webkit-transform: translateY(60%) scale(0.6) scaleY(0.5)}
	60%{-webkit-transform: translateY(-7%) scaleY(1)}
	100% {-webkit-transform: translateY(0%) scale(1) scaleY(1)}	
}

/*
==============================================
fadeIn
==============================================
*/

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

	animation-duration: 3.5s;	
	-webkit-animation-duration: 3.5s;

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

	visibility: visible !important}

@keyframes fadeIn {
	0% {opacity: 0}
	75% {opacity: 0}	
	100% {opacity: 1}		
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	75% {opacity: 0}	
	100% {opacity: 1}		
}