.slideanimation {visibility: hidden;}

.slide{

	/*the name of the animation*/
	animation-name: slide;
	-webkit-animation-name: slide;

	/*the duration of the animation*/
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	/*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;
		transform: translateY(70%);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

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