.animationUp{
    visibility: hidden;
}
.animateUp{
    animation-name: animateUp;
    -webkit-animation-name: animateUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes animateUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes animateUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}

.animationDown{
    visibility: hidden;
}
.animateDown{
    animation-name: animateDown;
    -webkit-animation-name: animateDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes animateDown {
    0% {
        opacity: 0;
        transform: translateY(-80%);
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes animateDown {
    0% {
        opacity: 0;
        transform: translateY(-80%);
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}

.animationRight{
    visibility: hidden;
}
.animateRight{
    animation-name: animateRight;
    -webkit-animation-name: animateRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes animateRight {
    0% {
        opacity: 0;
        transform: translateX(80%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}
@-webkit-keyframes animateRight {
    0% {
        opacity: 0;
        transform: translateX(80%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}

.animationLeft{
    visibility: hidden;
}
.animateLeft{
    animation-name: animateLeft;
    -webkit-animation-name: animateLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes animateLeft {
    0% {
        opacity: 0;
        transform: translateX(-80%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}
@-webkit-keyframes animateLeft {
    0% {
        opacity: 0;
        transform: translateX(-80%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}