.slideanim {visibility:hidden;}
.slide {
    /* name of  animation */
    animation-name: slide;
    -webkit-animation-name: slide;
    /*  duration of  animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    /* Makes 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(60%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}