nhgooi.nl/public/css/old/animations.css

.animated_element
{
	visibility: hidden;
	position: relative;
}
.fadeIn, .scale, .slideRight, .slideRightBack, .slideRight200, .slideLeft, .slideLeftBack, .slideLeft50, .slideDown, .slideDownBack, .slideDown200, .slideUp, .slideUpBack, .width, .height
{
	animation-timing-function: cubic-bezier(.75, 0, .25, 1);	
	-webkit-animation-timing-function: cubic-bezier(.75, 0, .25, 1);		
	visibility: visible !important;	
}
.slideRightBack, .slideLeftBack, .slideDownBack, .slideUpBack
{
	opacity: 0;
}
/* --- fadeIn --- */
.fadeIn
{	
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	
}
@keyframes fadeIn 
{
	0% 
	{
		opacity: 0;
	}
	100% 
	{
		opacity: 1;
	}
}
@-webkit-keyframes fadeIn 
{
	0% 
	{
		opacity: 0;
	}
	100% 
	{
		opacity: 1;
	}
}
/* --- scale --- */
.scale
{
	animation-name: scale;
	-webkit-animation-name: scale;
}
@keyframes scale 
{
	0% 
	{
		transform: scale(0.2);	
	}
	100% 
	{
		transform: scale(1);	
	}		
}
@-webkit-keyframes scale 
{
	0% 
	{
		-webkit-transform: scale(0.2);	
	}
	100% 
	{
		-webkit-transform: scale(1);
	}		
}
/* --- slideRight --- */
.slideRight
{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	
}
@keyframes slideRight 
{
	0% 
	{
		opacity: 0;
		transform: translateX(-100%);
	}
	100% 
	{
		opacity: 1;
		transform: translateX(0%);
	}
}
@-webkit-keyframes slideRight 
{
	0% 
	{
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}
	100% 
	{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
/* --- slideRightBack --- */
.slideRightBack
{
	animation-name: slideRightBack;
	-webkit-animation-name: slideRightBack;	
}
@keyframes slideRightBack 
{
	0% 
	{
		opacity: 1;
		transform: translateX(0%);
	}
	100% 
	{
		opacity: 0;
		transform: translateX(-100%);
	}
}
@-webkit-keyframes slideRightBack 
{
	0% 
	{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
	100% 
	{
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}
}
/* --- slideRight200 --- */
.slideRight200
{
	animation-name: slideRight200;
	-webkit-animation-name: slideRight200;	
}
@keyframes slideRight200 
{
	0%
	{
		opacity: 0;
		transform: translateX(-200%);
	}
	100% 
	{
		opacity: 1;
		transform: translateX(0%);
	}
}
@-webkit-keyframes slideRight200 
{
	0%
	{
		opacity: 0;
		-webkit-transform: translateX(-200%);
	}
	100% 
	{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
/* --- slideLeft --- */
.slideLeft
{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;
}
@keyframes slideLeft 
{
	0% 
	{
		opacity: 0;
		transform: translateX(100%);
	}
	100% 
	{
		opacity: 1;
		transform: translateX(0%);
	}	
}
@-webkit-keyframes slideLeft 
{
	0% 
	{
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
	100% 
	{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
/* --- slideLeftBack --- */
.slideLeftBack
{
	animation-name: slideLeftBack;
	-webkit-animation-name: slideLeftBack;
}
@keyframes slideLeftBack 
{
	0% 
	{
		opacity: 1;
		transform: translateX(0%);
	}
	100% 
	{
		opacity: 0;
		transform: translateX(100%);
	}	
}
@-webkit-keyframes slideLeftBack 
{
	0% 
	{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
	100% 
	{
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
}
/* --- slideLeft50 --- */
.slideLeft50
{
	animation-name: slideLeft50;
	-webkit-animation-name: slideLeft50;
}
@keyframes slideLeft50 
{
	0% 
	{
		opacity: 0;
		transform: translateX(50%);
	}
	100% 
	{
		opacity: 1;
		transform: translateX(0%);
	}	
}
@-webkit-keyframes slideLeft50 
{
	0% 
	{
		opacity: 0;
		-webkit-transform: translateX(50%);
	}
	100% 
	{
		opacity: 1;
		-webkit-transform: translateX(0%);
	}
}
/* --- slideDown --- */
.slideDown
{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;				
}
@keyframes slideDown 
{
	0% 
	{
		opacity: 0;
		transform: translateY(-100%);
	}
	100% 
	{
		opacity: 1;
		transform: translateY(0%);
	}		
}
@-webkit-keyframes slideDown 
{
	0% 
	{
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
	100% 
	{
		opacity: 1;
		-webkit-transform: translateY(0%);
	}	
}
/* --- slideDownBack --- */
.slideDownBack
{
	animation-name: slideDownBack;
	-webkit-animation-name: slideDownBack;				
}
@keyframes slideDownBack 
{
	0% 
	{
		opacity: 1;
		transform: translateY(0%);
	}
	100% 
	{
		opacity: 0;
		transform: translateY(-100%);
	}		
}
@-webkit-keyframes slideDownBack 
{
	0% 
	{
		opacity: 1;
		-webkit-transform: translateY(0%);
	}
	100% 
	{
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}	
}
/* --- slideDown --- */
.slideDown200
{
	animation-name: slideDown200;
	-webkit-animation-name: slideDown200;				
}
@keyframes slideDown200
{
	0% 
	{
		opacity: 0;
		transform: translateY(-100%);
	}
	100% 
	{
		opacity: 1;
		transform: translateY(0%);
	}		
}
@-webkit-keyframes slideDown200
{
	0% 
	{
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
	100% 
	{
		opacity: 1;
		-webkit-transform: translateY(0%);
	}	
}
/* --- slideUp --- */
.slideUp
{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;
}

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

@-webkit-keyframes slideUp 
{
	0% 
	{
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
	100% 
	{
		opacity: 1;
		-webkit-transform: translateY(0%);
	}	
}
/* --- slideUpBack --- */
.slideUpBack
{
	animation-name: slideUpBack;
	-webkit-animation-name: slideUpBack;
}

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

@-webkit-keyframes slideUpBack 
{
	0% 
	{
		opacity: 1;
		-webkit-transform: translateY(0%);
	}
	100% 
	{
		opacity: 0;
		-webkit-transform: translateY(100%);
	}	
}
/* --- width --- */
.width
{
	animation-name: width;
	-webkit-animation-name: width;
}

@keyframes width 
{
	0% 
	{
		width: 0%;
	}
	100%
	{
		width: 100%;
	}	
}

@-webkit-keyframes width 
{
	0% 
	{
		width: 0%;
	}
	100% 
	{
		width: 100%;
	}	
}
/* --- height --- */
.height
{
	animation-name: height;
	-webkit-animation-name: height;
}

@keyframes height 
{
	0% 
	{
		height: 0%;
	}
	100%
	{
		height: 100%;
	}	
}

@-webkit-keyframes height 
{
	0% 
	{
		height: 0%;
	}
	100% 
	{
		height: 100%;
	}	
}