/* START CREATE ANIMATION */
@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/* END CREATE ANIMATION */

/* START USE ANIMATION */
.animationMoveInBottom {
    animation: moveInBottom 1s ease-out;
}

.animationMoveInRight {
    animation: moveInRight 1s ease-out;
}

.animationMoveInLeft {
    animation: moveInLeft 1s ease-out;
}

.animationMoveInRightDelay {
    animation: moveInRight .5s ease-out .75s;
    animation-fill-mode: backwards;
}

.animationMoveInBottomDelay {
    animation: moveInBottom .5s ease-out .75s;
    animation-fill-mode: backwards;
}

.animationMoveInLeftDelay {
    animation: moveInLeft .5s ease-out .75s;
    animation-fill-mode: backwards;
}
/* END USE ANIMATION */