.fade-in {
    animation: fadeIn 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in {
    opacity: 1;
}

.fade-in-left {
    position: relative;
    opacity: 0;
    transform: translateX(-1em);
}

.fade-in-right {
    position: relative;
    opacity: 0;
    transform: translateX(1em);
}

.fade-in-top {
    position: relative;
    opacity: 0;
    transform: translateY(-1em);
}

.fade-in-left.visible {
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right.visible {
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    opacity: 1;
    transform: translateX(0);
}

.fade-in-top.visible {
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}