@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideFromTop {
    from {
        opacity: 0;
        transform: translateY(-80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.am_left,
.am_right,
.am_bottom,
.am_top {
    opacity: 0;
}

.am_left.active {
    animation: slideFromLeft 0.8s ease-out forwards;
}

.am_right.active {
    animation: slideFromRight 0.8s ease-out forwards;
}

.am_top.active {
    animation: slideFromTop 0.8s ease-out forwards;
}

.am_bottom.active {
    animation: slideFromBottom 0.8s ease-out forwards;
}