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

@keyframes slideLeft {
    from {
        left: -100vw;
    }
}

@keyframes slideRight {
    from {
        left: 200vw;
    }
}

@keyframes slideTop {
    from {
        top: -100vh;
    }
}

@keyframes slideBottom {
    from {
        top: 200vh;
    }
}

.animation--fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
}

.animation--slideLeft {
    animation-name: slideLeft;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
}

.animation--slideRight {
    animation-name: slideRight;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
}

.animation--slideTop {
    animation-name: slideTop;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
}

.animation--slideBottom {
    animation-name: slideBottom;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
}
