/* Classes das animações */
.topdown {
    animation: topdown 700ms 350ms backwards;
}

.bottomup {
    animation: bottomup 700ms 350ms backwards;
}

.leftright {
    animation: leftright 700ms 350ms backwards;
}

.rightleft {
    animation: rightleft 700ms 350ms backwards;
}

.fadein {
    animation: fadein 700ms 350ms backwards;
}

.animation-scaleup {
    animation: scaleup 700ms 350ms backwards;
}

.rotate {
    animation: rotate 700ms 350ms backwards;
}

/* Exemplo de animação com tempo maior */
.topdown-delayed {
    animation: topdown 1s 500ms backwards;
    /* 1 segundo de duração, 500ms de atraso */
}

.bottomup-delayed {
    animation: bottomup 1s 500ms backwards;
}

.leftright-delayed {
    animation: leftright 1s 500ms backwards;
}

.rightleft-delayed {
    animation: rightleft 1s 500ms backwards;
}

.fadein-delayed {
    animation: fadein 1s 500ms backwards;
}

.scaleup-delayed {
    animation: scaleup 1s 500ms backwards;
}

.rotate-delayed {
    animation: rotate 1s 500ms backwards;
}


/* keyframes de animações */
@keyframes topdown {

    0% {
        opacity: 0;
        transform: translateY(-15px);
    }

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

}

@keyframes bottomup {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

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

@keyframes leftright {
    0% {
        opacity: 0;
        transform: translateX(-15px);
    }

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

@keyframes rightleft {
    0% {
        opacity: 0;
        transform: translateX(15px);
    }

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

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

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

@keyframes rotate {
    0% {
        opacity: 0;
        transform: rotate(45deg);
    }

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