:root {
    --delay-animation: 1000ms;
}



.animation {
    transition: all 1s ease;
}

.rotateFadeLeftIn {
    animation: rotateFadeLeftIn var(--delay-animation) ease;
}

.rotateFadeRightIn {
    animation: rotateFadeRightIn var(--delay-animation) ease;
}

.fadeBackIn {
    animation: fadeBackIn var(--delay-animation) ease;
}

.fadeFrontIn {
    animation: fadeFrontIn var(--delay-animation) ease;
}

.fadeLeftIn {
    animation: fadeLeftIn var(--delay-animation) ease;
}

.fadeRightIn {
    animation: fadeRightIn var(--delay-animation) ease;
}

.fadeUpIn {
    animation: fadeUpIn var(--delay-animation) ease;
}

.fadeDownIn {
    animation: fadeDownIn var(--delay-animation) ease;
}

.anim-invisible {
    opacity: 0;
    transition: opacity 800ms ease;
}

@keyframes rotateFadeLeftIn {
    0% {
        transform: translateX(-30%) rotate(-20deg) scale(.5);
        opacity: 0;
    }

    100% {
        transform: translateX(0) rotate(0) scale(1);
        opacity: 1;
    }

}

@keyframes rotateFadeRightIn {
    0% {
        transform: translateX(30%) rotate(20deg) scale(.5);
        opacity: 0;
    }

    100% {
        transform: translateX(0) rotate(0) scale(1);
        opacity: 1;
    }

}

@keyframes fadeBackIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}

@keyframes fadeFrontIn {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}

@keyframes fadeLeftIn {
    0% {
        transform: translateX(-30%);
        opacity: 0;
    }

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

}

@keyframes fadeRightIn {
    0% {
        transform: translateX(30%);
        opacity: 0;
    }

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

}

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

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

}

@keyframes fadeDownIn {
    0% {
        transform: translateY(-30%);
        opacity: 0;
    }

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

}