.slideanim {visibility:hidden;}
.rise {
	/* The name of the animation */
	animation-name: slide;
	-webkit-animation-name: slide; 
	/* The duration of the animation */
	animation-duration: 1s; 
	-webkit-animation-duration: 1s;
	/* Make the element visible */
	visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
	0% {
		opacity: 0;
		-webkit-transform: translateY(70%);
	} 
	100% {
		opacity: 1;
		-webkit-transform: translateY(0%);
	} 
}
@-webkit-keyframes slide {
	0% {
		opacity: 0;
		-webkit-transform: translateY(70%);
	} 
	100% {
		opacity: 1;
		-webkit-transform: translateY(0%);
	}
}


/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeProjects { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeProjects { from { opacity:0; } to { opacity:1; } }
@keyframes fadeProjects { from { opacity:0; } to { opacity:1; } }
 
.fadeProjects {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeProjects ease-in 1;  /* call our keyframe named fadeProjects, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeProjects ease-in 1;
	animation:fadeProjects ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}