/* Pages hors connexion : animations de la page de déconnexion */

.firstAnimPic {
    animation: firstAnimPic 3s;
    transform: scale(0);
}

.firstAnimText {
    animation: firstAnimText 3s;
    transform: scale(0);
}

.secondAnimPic {
    animation: secondAnimPic 3s;
    animation-delay: 2.5s;
    transform: scale(0);
    
}

.secondAnimText {
    animation: secondAnimPic 3s;
    animation-delay: 2.5s;
    transform: scale(0);
}

@keyframes firstAnimPic {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    20% {
        transform: scale(1);
        opacity: 0.65;
    }

    50% {
        opacity: 1;

    }

    80% {
        transform: scale(1);
        opacity: 0.65;


    }

    100% {
        transform: scale(0);
        opacity: 0.5;

    }

}

@keyframes firstAnimText {
    0% {

        transform: translateX(200px);
        opacity: 0;
    }

    20% {
        transform: translateX(0);
        opacity: 1;

    }


    80% {
        transform: translateX(0);
        opacity: 1;


    }

    100% {
        opacity: 0;
        transform: translateX(200px);

    }

}

@keyframes secondAnimPic {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    20% {
        transform: scale(1);
        opacity: 0.65;
    }

    50% {
        opacity: 1;

    }

    80% {
        transform: scale(1);
        opacity: 0.65;


    }

    100% {
        transform: scale(0);
        opacity: 0.5;

    }

}

@keyframes secondAnimText {
    0% {

        transform: translateX(-200px);
        opacity: 0;
    }

    20% {
        transform: translateX(0);
        opacity: 1;

    }


    80% {
        transform: translateX(0);
        opacity: 1;


    }

    100% {
        opacity: 0;
        transform: translateX(-200px);

    }

}