.animation{
    animation-delay: .5s;
    animation-fill-mode: both;
}
.animationUp{
    animation: animationUp .5s linear;
}
@keyframes animationUp {
    from {
        opacity: 0;
        transform: translate(0, 50px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animationDown{
    animation: animationDown .5s linear;
}
@keyframes animationDown {
    from {
        opacity: 0;
        transform: translate(0, -50px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animationLeft{
    animation: animationLeft .5s linear;
}
@keyframes animationLeft {
    from {
        opacity: 0;
        transform: translate(50px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.animationRight{
    animation: animationRight .5s linear;
}
@keyframes animationRight {
    from {
        opacity: 0;
        transform: translate(-50px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}