.animatie{
	width: 100%;
	height: 100%;
	background-color: #0f0022;
	position: absolute;
	left:-100%;
	top: 0;
	z-index: 9999;
}

.animatie.zwart{
	background-color: #0f0022;
}

.animatie.wit{
	background-color: #ffffff;
}

.animatie.groen{
	background-color: #1EFF64;
}

.animatie.zwart.aan{
	
	animation-name: leave;
	-webkit-animation-name: leave;	

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

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

.animatie.groen.aan{
	animation-name: leave;
	-webkit-animation-name: leave;	

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

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

.animatie.wit.aan{
	
	animation-name: leave-einde;
	-webkit-animation-name: leave-einde;	

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

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

.animatie.wit.uit{
	
	animation-name: arrive-begin;
	-webkit-animation-name: arrive-begin;	

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

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

@-webkit-keyframes leave {
    0%	{left: -100%;}
	50%	{left: 0px;}
    100%	{left: 100%;}
}

@keyframes leave {
	 0%	{left: -100%;}
	50%	{left: 0px;}
    100%	{left: 100%;}
}

@-webkit-keyframes leave-einde {
    0%	{left: -100%;}
	100%	{left: 0px;}
}

@keyframes leave-einde {
	 0%	{left: -100%;}
	100%	{left: 0px;}
}

@-webkit-keyframes arrive {
     0%	{left: 100%;}
	50%	{left: 0px;}
    100%	{left: -100%;}
}

@keyframes arrive {
	 0%	{left: 100%;}
	50%	{left: 0px;}
    100%	{left: -100%;}
}

@-webkit-keyframes arrive-begin {
     0%	{left: 0px;}
	100%	{left: 100%;
	opacity: 0;}
}

@keyframes arrive-begin {
    0%	{left: 0px;}
	100%	{left: 100%;
	opacity:0; }
}


@-webkit-@keyframes intro-begin-groen {
    0%	{left: -200px;
	opacity: 1;}
	100%	{left: 0px;
		opacity: 1;}
}

@keyframes intro-begin-groen {
    0%	{left: -200px;
	opacity: 1;}
	100%	{left: 0px;
	opacity: 1;}
}