.slide {
    opacity: 0;
}
.animateU {
    animation: slideUp 0.8s cubic-bezier(0,0,.32,1);
}
.animateD {
    animation: slideDown 0.8s cubic-bezier(0,0,.32,1);
}
.animateL {
    animation: slideLeft 0.8s cubic-bezier(0,0,.32,1);
}
.animateR {
    animation: slideRight 0.8s cubic-bezier(0,0,.32,1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}