@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(200px) scale(0.8);
    }

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

@keyframes fade-left {
    0% {
        opacity: 0;
        transform: translateX(500px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}

@keyframes fade-right{
    0% {
        opacity: 0;
        transform: translateX(-500px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}

@keyframes opacity-fade-in-out {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-up {
    opacity: 1;
    animation: fade-up 1s;
}

.fade-left {
    opacity: 1;
    animation-delay: 3s;
    animation: fade-left 1s;
}

.fade-right{
    opacity: 1;
    animation-delay: 3s;
    animation: fade-right 1s;
}

.opacity-fade-in-out {
    animation-name: opacity-fade-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}