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

Made by Justin Aguilar

www.justinaguilar.com/animations/

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

/*
==============================================
slideDown
==============================================
*/
.animatedElement
{
	opacity:0;
	-webkit-perspective: 1000;
}

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

	animation-duration: 0.7s;	
	-webkit-animation-duration: 0.7s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;	

	visibility: visible !important;
	opacity:1;						
}

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

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

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


.css-animate.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;
	opacity:1;			
}

@keyframes slideUp{
	0%{
		transform: translateY(20%);
		opacity:0;
	}			
	100%{
		transform: translateY(0%);
		opacity:1;
	}	
}

@-webkit-keyframes slideUp{
	0%{
		-webkit-transform: translateY(20%);
		opacity:0;
	}			
	100%{
		-webkit-transform: translateY(0%);
		opacity:1;
	}	
}

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


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

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

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

	visibility: visible !important;
	opacity:1;	
}

@keyframes slideLeft{
	0%{
		transform: translateX(20%);
		opacity:0;
	}			
	100%{
		transform: translateX(0%);
		opacity:1;
	}
}

@-webkit-keyframes slideLeft{
	0%{
		-webkit-transform: translateX(20%);
		opacity:0;
	}			
	100%{
		-webkit-transform: translateX(0%);
		opacity:1;
	}
}

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


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

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

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

	visibility: visible !important;
	opacity:1;	
}

@keyframes slideRight{
	0%{
		transform: translateX(-20%);
		opacity:0;
	}			
	100%{
		transform: translateX(0%);
		opacity:1;
	}	
}

@-webkit-keyframes slideRight{
	0%{
		-webkit-transform: translateX(-20%);
		opacity:0;
	}			
	100%{
		-webkit-transform: translateX(0%);
		opacity:1;
	}	
}

/*
==============================================
slideExpandUp
==============================================
*/


.css-animate.slideExpandUp{
	animation-name: slideExpandUp;
	-webkit-animation-name: slideExpandUp;	

	animation-duration: 1.3s;	
	-webkit-animation-duration: 1.3s;

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

	visibility: visible !important;
	opacity:1;	
}

@keyframes slideExpandUp{
	0%{
		transform: translateY(30%) scaleX(0.5);
		opacity:0;
	}
	30%{
		transform: translateY(0%) scaleX(0.5);
		opacity:0.5;
	}
	100%{
		transform: translateY(0%) scaleX(1);
		opacity:1;		
	}
}

@-webkit-keyframes slideExpandUp{
	0%{
		-webkit-transform: translateY(30%) scaleX(0.5);
		opacity:0;
	}
	30%{
		-webkit-transform: translateY(0%) scaleX(0.5);
		opacity:0.5;
	}	
	100%{
		-webkit-transform: translateY(0%) scaleX(1);
		opacity:1;		
	}
}

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


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

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

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

	visibility: visible !important;
	opacity:1;	
}

@keyframes expandUp{
	0%{
		transform: translateY(30%) scale(0.7) scaleY(0.6);
	}
	100%{
		transform: translateY(0%) scale(1) scaleY(1);
	}	
}

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

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

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

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

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		

	visibility: visible !important;
	opacity:1;	
}

@keyframes fadeIn{
	0%{
		opacity: 0;		
	}	
	100%{
		opacity: 1;	
	}		
}
@-moz-keyframes fadeIn{
	0%{
		opacity: 0;		
	}	
	100%{
		opacity: 1;	
	}		
}

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


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

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

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

	visibility: visible !important;
	opacity:1;	
}

@keyframes expandOpen{
	0%{
		transform: scale(1.1);
		opacity:0.5;		
	}	
	100%{
		transform: scale(1);
		opacity:1;
	}			
}

@-webkit-keyframes expandOpen{
	0%{
		-webkit-transform: scale(1.1);
		opacity:0.5;		
	}	
	100%{
		-webkit-transform: scale(1);
		opacity:1;
	}					
}

/*
==============================================
bigEntranceRight
==============================================
*/


.css-animate.bigEntranceRight{
	animation-name: bigEntranceRight;
	-webkit-animation-name: bigEntranceRight;	

	animation-duration: 0.6s;	
	-webkit-animation-duration: 0.6s;

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

	visibility: visible !important;
	opacity:1;			
}

@keyframes bigEntranceRight{
	0%{
		transform: scale(0.8) rotate(4deg) translateX(-30%) translateY(30%);
		opacity: 0.3;
	}	
	100%{
		transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}		
}

@-webkit-keyframes bigEntranceRight{
	0%{
		-webkit-transform: scale(0.8) rotate(4deg) translateX(-30%) translateY(30%);
		opacity: 0.3;
	}
	100%{
		-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}				
}

/*
==============================================
bigEntranceLeft
==============================================
*/


.css-animate.bigEntranceLeft{
	animation-name: bigEntranceLeft;
	-webkit-animation-name: bigEntranceLeft;	

	animation-duration: 0.6s;	
	-webkit-animation-duration: 0.6s;

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

	visibility: visible !important;
	opacity:1;			
}

@keyframes bigEntranceLeft{
	0%{
		transform: scale(0.8) rotate(-4deg) translateX(30%) translateY(30%);
		opacity: 0.3;
	}	
	100%{
		transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}		
}

@-webkit-keyframes bigEntranceLeft{
	0%{
		-webkit-transform: scale(0.8) rotate(-4deg) translateX(30%) translateY(30%);
		opacity: 0.3;
	}
	100%{
		-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}				
}

/*
==============================================
bounce
==============================================
*/


.css-animate.bounce{
	animation-name: bounce;
	-webkit-animation-name: bounce;	

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

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	opacity:1; 	
}

@keyframes bounce{
	0%{
		transform: translateY(0%) scaleY(0.8);
	}
	60%{
		transform: translateY(-20%);
	}			
	100%{
		transform: translateY(0%) scaleY(1) scaleX(1);
	}	
}

@-webkit-keyframes bounce{
	0%{
		-webkit-transform: translateY(0%) scaleY(0.8);
	}
	60%{
		-webkit-transform: translateY(-20%);
	}				
	100%{
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}		
}


/*
==============================================
pullUp
==============================================
*/

.css-animate.pullUp{
	animation-name: pullUp;
	-webkit-animation-name: pullUp;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

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

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 
	opacity:1;		
}

@keyframes pullUp{
	0%{
		transform: scaleY(0.1);
	}
	40%{
		transform: scaleY(1.02);
	}
	60%{
		transform: scaleY(0.98);
	}
	80%{
		transform: scaleY(1.01);
	}
	100%{
		transform: scaleY(0.98);
	}				
	80%{
		transform: scaleY(1.01);
	}
	100%{
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullUp{
	0%{
		-webkit-transform: scaleY(0.1);
	}
	40%{
		-webkit-transform: scaleY(1.02);
	}
	60%{
		-webkit-transform: scaleY(0.98);
	}
	80%{
		-webkit-transform: scaleY(1.01);
	}
	100%{
		-webkit-transform: scaleY(0.98);
	}				
	80%{
		-webkit-transform: scaleY(1.01);
	}
	100%{
		-webkit-transform: scaleY(1);
	}		
}

/*
==============================================
pullDown
==============================================
*/

.css-animate.pullDown{
	animation-name: pullDown;
	-webkit-animation-name: pullDown;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

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

	transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%; 
	opacity:1;		
}

@keyframes pullDown{
	0%{
		transform: scaleY(0.1);
	}
	40%{
		transform: scaleY(1.02);
	}
	60%{
		transform: scaleY(0.98);
	}
	80%{
		transform: scaleY(1.01);
	}
	100%{
		transform: scaleY(0.98);
	}				
	80%{
		transform: scaleY(1.01);
	}
	100%{
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullDown{
	0%{
		-webkit-transform: scaleY(0.1);
	}
	40%{
		-webkit-transform: scaleY(1.02);
	}
	60%{
		-webkit-transform: scaleY(0.98);
	}
	80%{
		-webkit-transform: scaleY(1.01);
	}
	100%{
		-webkit-transform: scaleY(0.98);
	}				
	80%{
		-webkit-transform: scaleY(1.01);
	}
	100%{
		-webkit-transform: scaleY(1);
	}		
}

/*
==============================================
stretchLeft
==============================================
*/

.css-animate.stretchLeft{
	animation-name: stretchLeft;
	-webkit-animation-name: stretchLeft;	

	animation-duration: 0.7s;	
	-webkit-animation-duration: 0.7s;

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

	transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	-webkit-transform-origin: 100% 0%; 
	opacity:1;
}

@keyframes stretchLeft{
	0%{
		transform: scaleX(0.5);
	}
	100%{
		transform: scaleX(1);
	}							
}

@-webkit-keyframes stretchLeft{
	0%{
		-webkit-transform: scaleX(0.5);
	}
	100%{
		-webkit-transform: scaleX(1);
	}		
}

/*
==============================================
stretchRight
==============================================
*/


.css-animate.stretchRight{
	animation-name: stretchRight;
	-webkit-animation-name: stretchRight;	

	animation-duration: 0.7s;	
	-webkit-animation-duration: 0.7s;

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

	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	
	opacity:1; 		
}

@keyframes stretchRight {
	0% {
		transform: scaleX(0.5);
		
	}
	100% {
		transform: scaleX(1);
	}							
}

@-webkit-keyframes stretchRight {
	0% {
		-webkit-transform: scaleX(0.5);
	}
	100% {
		-webkit-transform: scaleX(1);
	}		
}