@keyframes toLeft {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toRight {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes toUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes toDown {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.toLeft {
    animation: toLeft 0.8s ease forwards;
}
.toRight {
    animation: toRight 0.8s ease forwards;
}
.toUp {
    animation: toUp 0.8s ease forwards;
}
.toDown {
    animation: toDown 0.8s ease forwards;
}
.hidden {
    opacity: 0;
}

.show {
    opacity: 1;
}
.hidden {
    opacity: 0;
}

.hidden.toLeft,
.hidden.toRight,
.hidden.toUp,
.hidden.toDown {
    animation: none;
}

.show.toLeft {
    animation: toLeft 0.8s ease forwards;
}

.show.toRight {
    animation: toRight 0.8s ease forwards;
}

.show.toUp {
    animation: toUp 0.8s ease forwards;
}

.show.toDown {
    animation: toDown 0.8s ease forwards;
}