:root{
    --effectDistance:4vw;
    --effectDuration:0.2s;
}

.fadeIn, .fadeInBottom, .fadeInLeft, .fadeInRight {
    opacity: 0;
}
.scrolled.fadeIn {
    animation: fadeIn var(--effectDuration) ease-in-out both;
}
.scrolled.fadeInBottom {
    animation: fadeInBottom var(--effectDuration) ease-in-out both;
}
.scrolled.fadeInLeft {
    animation: fadeInLeft var(--effectDuration) ease-in-out both;
}
.scrolled.fadeInRight {
    animation: fadeInRight var(--effectDuration) ease-in-out both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeInBottom {
    0% {
        transform: translateY(var(--effectDistance));
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeInLeft {
    0% {
        transform: translateX(calc(var(--effectDistance)*-1));
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fadeInRight {
    0% {
        transform: translateX(var(--effectDistance));
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}