/*

==============================================

CSS3 ANIMATION CHEAT SHEET

==============================================



Made by Justin Aguilar



www.justinaguilar.com/animations/



Questions, comments, concerns, love letters:

justin@justinaguilar.com

==============================================

*/



/*

==============================================

expandUp

==============================================

*/





.expandUp{

	animation-name: expandUp;

	-webkit-animation-name: expandUp;	



	animation-duration: 3.0s;	

	-webkit-animation-duration: 3.0s;



	animation-timing-function: ease;	

	-webkit-animation-timing-function: ease;		



	visibility: visible !important;	

}



@keyframes expandUp {

	0% {

		transform: translateY(100%) scale(0.6) scaleY(0.5);

	}

	60%{

		transform: translateY(-7%) scaleY(1.12);

	}

	75%{

		transform: translateY(3%);

	}	

	100% {

		transform: translateY(0%) scale(1) scaleY(1);

	}	

}



@-webkit-keyframes expandUp {

	0% {

		-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);

	}

	60%{

		-webkit-transform: translateY(-7%) scaleY(1.12);

	}

	75%{

		-webkit-transform: translateY(3%);

	}	

	100% {

		-webkit-transform: translateY(0%) scale(1) scaleY(1);

	}	

}





/*

==============================================

expandOpen

==============================================

*/





.expandOpen,.team-section:hover{

	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.8);		

	}

	50% {

		transform: scale(0.95);

	}	

	80% {

		transform: scale(1.05);

	}

	90% {

		transform: scale(0.98);

	}	

	100% {

		transform: scale(1);

	}			

}



@-webkit-keyframes expandOpen {

	0% {

		-webkit-transform: scale(1.8);		

	}

	50% {

		-webkit-transform: scale(0.95);

	}	

	80% {

		-webkit-transform: scale(1.05);

	}

	90% {

		-webkit-transform: scale(0.98);

	}	

	100% {

		-webkit-transform: scale(1);

	}					

}





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

pulse

==============================================

*/



.pulse,.plan1:hover{

	animation-name: pulse;

	-webkit-animation-name: pulse;	



	animation-duration: 1.5s;	

	-webkit-animation-duration: 1.5s;



	animation-iteration-count: infinite;

	-webkit-animation-iteration-count: infinite;

}



@keyframes pulse {

	0% {

		transform: scale(0.9);

		opacity: 0.7;		

	}

	50% {

		transform: scale(1);

		opacity: 1;	

	}	

	100% {

		transform: scale(0.9);

		opacity: 0.7;	

	}			

}



@-webkit-keyframes pulse {

	0% {

		-webkit-transform: scale(0.95);

		opacity: 0.7;		

	}

	50% {

		-webkit-transform: scale(1);

		opacity: 1;	

	}	

	100% {

		-webkit-transform: scale(0.95);

		opacity: 0.7;	

	}			

}



/*

==============================================

floating

==============================================

*/



.floating,.grid li:hover{

	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%);

	}			

}