/* Fade-in */

.slideanim-x, .slideanim-y {
	visibility: hidden;
}

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

.slideanim-y.slide {
    /* The name of the animation */
    animation-name: slide-y;
    -webkit-animation-name: slide-y;
    /* The duration of the animation */
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.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-x {
    0% {
        opacity: 0;
        transform: translateX(70%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
@-webkit-keyframes slide-x {
    0% {
        opacity: 0;
        -webkit-transform: translateX(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

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